Banner.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. <template>
  2. <div class="container">
  3. <div class="banner">
  4. <div class="logo fl">
  5. <img src="../../images/robot_icon.png" alt="朗通logo"/>
  6. <img class="img-title" src="../../images/title.png"/>
  7. </div>
  8. <div class="consult fr">
  9. <span>咨询热线:{{phone}} &nbsp;</span> |
  10. <span>服务时间:{{workTime}}</span>
  11. <span class="toLogin" v-show="route=='/register'">已有账号?<b @click="toLogin">立即登录</b></span>
  12. </div>
  13. </div>
  14. </div>
  15. </template>
  16. <script>
  17. // import '@components/login/login.less';
  18. export default {
  19. template: '#banner-template',
  20. data() {
  21. return {
  22. phone: '400-600-1919',
  23. workTime: '09:00-17:30'
  24. }
  25. },
  26. computed:{
  27. route(){
  28. return this.$route.path;
  29. }
  30. },
  31. methods:{
  32. toLogin(){
  33. this.$router.push({path:'/'});
  34. }
  35. }
  36. };
  37. </script>
  38. <style lang="less">
  39. * {
  40. margin: 0;
  41. padding: 0;
  42. }
  43. html, body {
  44. width: 100%;
  45. height: 100%;
  46. /* background-image:url(/src/images/bg.jpg);
  47. background-size: 100% 100%;
  48. background-repeat: no-repeat; */
  49. }
  50. .container {
  51. width: 100%;
  52. height: 100%;
  53. background-image: url(../../images/bg.jpg);
  54. background-size: 100% 100%;
  55. background-repeat: no-repeat;
  56. .banner {
  57. height: 60px;
  58. background: #fff;
  59. line-height: 60px;
  60. }
  61. .banner img {
  62. display: inline-block;
  63. margin-top: 10px;
  64. margin-left: 30px;
  65. }
  66. .img-title {
  67. margin-left: 10px !important;
  68. }
  69. .consult {
  70. margin-right: 30px;
  71. color: #424243;
  72. font-size: 14px;
  73. float: right;
  74. }
  75. .logo {
  76. display: inline-block;
  77. }
  78. .consult {
  79. display: inline-block;
  80. }
  81. .toLogin{
  82. margin-left: 10px;
  83. >b{
  84. color:#1774f0;
  85. cursor: pointer;
  86. }
  87. }
  88. }
  89. </style>