瑜璟缘官网
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。
 
 
 

210 行
4.7 KiB

  1. <template>
  2. <div class="bgBox">
  3. <div class="topBar">
  4. <div class="topBar_ct">
  5. <p class="left">欢迎来到 武汉富茂科技有限公司 !</p>
  6. <p class="right">
  7. <span @click="goRouter('/publish')">发布信息</span>
  8. <span @click="goRouter('/login')">登录</span>
  9. <span @click="goRouter('/register')">注册</span>
  10. </p>
  11. </div>
  12. </div>
  13. <div class="topImgBox">
  14. <!-- <img src="../../assets/img/bg/bg.jpg" class="topImg" alt=""> -->
  15. <el-input placeholder="搜索" v-model="search" class="searchIpt" @keyup.enter.native="searchFn">
  16. </el-input>
  17. </div>
  18. <div class="nav">
  19. <el-menu :default-active="menuActiveIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
  20. background-color="#409EFF"
  21. text-color="#fff"
  22. active-text-color="#ffd04b"
  23. >
  24. <el-menu-item index="1">首页</el-menu-item>
  25. <el-menu-item index="4">生活服务</el-menu-item>
  26. <el-menu-item index="5">房屋租赁</el-menu-item>
  27. <el-menu-item index="6">宠物市场</el-menu-item>
  28. <el-menu-item index="7">餐饮美食</el-menu-item>
  29. <el-menu-item index="8">票务卡券</el-menu-item>
  30. <el-menu-item index="9">车辆服务</el-menu-item>
  31. <el-menu-item index="10">企业招聘</el-menu-item>
  32. <el-menu-item index="11">商务服务</el-menu-item>
  33. </el-menu>
  34. </div>
  35. </div>
  36. </template>
  37. <script>
  38. export default {
  39. data() {
  40. return {
  41. search: '',
  42. menuActiveIndex: '1'
  43. };
  44. },
  45. watch: {
  46. $route() {
  47. this.menuActiveIndex = this.$route.query.tag ? this.$route.query.tag : '1'
  48. }
  49. },
  50. methods: {
  51. handleSelect(key, keyPath) {
  52. if(key === '1') {
  53. this.$router.push('/home');
  54. } else {
  55. this.$router.push({path: "/journalism",query:{tag: key}});
  56. }
  57. },
  58. goRouter(url) {
  59. if(url) {
  60. this.$router.push(url);
  61. }
  62. },
  63. searchFn() {
  64. this.$router.push('/home')
  65. this.search = ''
  66. }
  67. }
  68. };
  69. </script>
  70. <style lang="scss" scoped>
  71. .bgBox {
  72. width: 100%;
  73. /* background-image: url("../../assets/img/bg/2165324.png");
  74. //background-attachment: fixed;
  75. background-repeat: repeat-x;
  76. background-size: 100% 160px; */
  77. .topBar{
  78. line-height: 40px;
  79. height: 40px;
  80. height: 40px;
  81. background: rgb(228 242 253 / 70%);
  82. color: #444;
  83. .topBar_ct{
  84. width: 1200px;
  85. margin: 0 auto;
  86. .left{
  87. float: left;
  88. }
  89. .right{
  90. float: right;
  91. span{
  92. padding: 0 15px;
  93. cursor: pointer;
  94. }
  95. span:nth-of-type(2){
  96. border-right: 1px solid #ccc;
  97. }
  98. span:hover{
  99. font-weight: bold;
  100. }
  101. }
  102. }
  103. }
  104. .topImgBox{
  105. position: relative;
  106. height: 130px;
  107. background: #E4F2FD;
  108. width: 100%;
  109. .searchIpt{
  110. position: absolute;
  111. right: 20%;
  112. top: 5%;
  113. width: 200px;
  114. border: none;
  115. }
  116. }
  117. .topImg{
  118. width: 100%;
  119. }
  120. .nav {
  121. width: 1200px;
  122. margin: -64px auto 20px;
  123. display: flex;
  124. /* height: 60px;
  125. line-height: 60px; */
  126. background: #606266;
  127. .el-menu--horizontal {
  128. width: 100%;
  129. }
  130. .el-menu--horizontal>.el-menu-item {
  131. height: 50px;
  132. line-height: 50px;
  133. }
  134. }
  135. }
  136. .Box {
  137. overflow: hidden;
  138. }
  139. .backImg {
  140. height: 160px;
  141. width: 100%;
  142. .logoBox {
  143. width: 1200px;
  144. height: 160px;
  145. margin: 0 auto;
  146. // background-color: red;
  147. overflow: hidden;
  148. .logo_img {
  149. height: 130px;
  150. width: 150px;
  151. // background-color: antiquewhite;
  152. margin: 5px;
  153. float: left;
  154. img {
  155. width: 100%;
  156. height: 100%;
  157. }
  158. }
  159. .title_Box {
  160. float: left;
  161. margin-left: 100px;
  162. margin-top: 30px;
  163. p {
  164. width: 600px;
  165. font-size: 30px;
  166. margin: 20px 0;
  167. text-align: center;
  168. font-weight: bold;
  169. color: rgb(253, 236, 189);
  170. }
  171. }
  172. }
  173. }
  174. .navigation {
  175. width: 1200px;
  176. margin: 0 auto;
  177. margin-top: 20px;
  178. background-color: cornflowerblue;
  179. }
  180. .el-menu-demo {
  181. display: flex;
  182. .el-menu-item {
  183. /* width: 10%; */
  184. text-align: center;
  185. flex: 1;
  186. }
  187. }
  188. /*.el-submenu {
  189. text-align: center;
  190. width: 14.2%;
  191. } */
  192. </style>
  193. <style lang="scss">
  194. .searchIpt{
  195. input{
  196. border: none;
  197. width: 150px;
  198. height: 30px;
  199. border-radius: 30px;
  200. }
  201. }
  202. </style>