瑜璟缘官网
Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.
 
 
 

210 wiersze
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. background: #409EFF;
  81. color: #fff;
  82. .topBar_ct{
  83. width: 1200px;
  84. margin: 0 auto;
  85. .left{
  86. float: left;
  87. }
  88. .right{
  89. float: right;
  90. span{
  91. padding: 0 15px;
  92. cursor: pointer;
  93. }
  94. span:nth-of-type(2){
  95. border-right: 1px solid #ccc;
  96. }
  97. span:hover{
  98. font-weight: bold;
  99. }
  100. }
  101. }
  102. }
  103. .topImgBox{
  104. position: relative;
  105. .searchIpt{
  106. position: absolute;
  107. right: 20%;
  108. top: 5%;
  109. width: 200px;
  110. border: none;
  111. }
  112. }
  113. .topImg{
  114. width: 100%;
  115. }
  116. .nav {
  117. width: 1200px;
  118. margin: 20px auto;
  119. display: flex;
  120. /* height: 60px;
  121. line-height: 60px; */
  122. background: #606266;
  123. .el-dropdown{
  124. flex: 1;
  125. text-align: center;
  126. color: #fff;
  127. cursor: pointer;
  128. .title{
  129. width: 100%;
  130. display: inline-block;
  131. }
  132. }
  133. }
  134. }
  135. .Box {
  136. overflow: hidden;
  137. }
  138. .backImg {
  139. height: 160px;
  140. width: 100%;
  141. .logoBox {
  142. width: 1200px;
  143. height: 160px;
  144. margin: 0 auto;
  145. // background-color: red;
  146. overflow: hidden;
  147. .logo_img {
  148. height: 130px;
  149. width: 150px;
  150. // background-color: antiquewhite;
  151. margin: 5px;
  152. float: left;
  153. img {
  154. width: 100%;
  155. height: 100%;
  156. }
  157. }
  158. .title_Box {
  159. float: left;
  160. margin-left: 100px;
  161. margin-top: 30px;
  162. p {
  163. width: 600px;
  164. font-size: 30px;
  165. margin: 20px 0;
  166. text-align: center;
  167. font-weight: bold;
  168. color: rgb(253, 236, 189);
  169. }
  170. }
  171. }
  172. }
  173. .navigation {
  174. width: 1200px;
  175. margin: 0 auto;
  176. margin-top: 20px;
  177. background-color: cornflowerblue;
  178. }
  179. .el-menu-demo {
  180. display: flex;
  181. .el-menu-item {
  182. /* width: 10%; */
  183. text-align: center;
  184. flex: 1;
  185. }
  186. }
  187. /*.el-submenu {
  188. text-align: center;
  189. width: 14.2%;
  190. } */
  191. .el-menu--horizontal {
  192. width: 100%;
  193. }
  194. </style>
  195. <style lang="scss">
  196. .searchIpt{
  197. input{
  198. border: none;
  199. width: 150px;
  200. height: 30px;
  201. border-radius: 30px;
  202. }
  203. }
  204. </style>