手机端页面

2022-05-26 17:40:10 +08:00
parent 70cd152344
commit 6a79131ad1
13 changed files with 772 additions and 1 deletions
@@ -0,0 +1,155 @@
+<template>
+  <div id="phone-home">
+    <div class="search-top">
+      <div class="top-title">
+      </div>
+      <h3 class="home-title">标 准 法 规 管 理 系 统 S R M S</h3>
+      <div style="border: 1px solid #FFFFFF; position:absolute; top: 15%; left: 49% ;width: 25px; "></div>
+    </div>
+    <div class="search-head">
+      <van-search
+        v-model="searchKey"
+        show-action
+        placeholder="请输入搜索关键词"
+        @search="onSearch"
+      >
+        <template #action>
+          <div @click="onSearch">搜索</div>
+        </template>
+      </van-search>
+    </div>
+    <div class="content">
+      <div class="content-top" style="margin-top: 10px">
+        <div class="content-box content-box1"></div>
+        <span class="content-span">国内标准法规</span>
+      </div>
+      <div class="content-top" style="margin-top: 10px">
+        <div class="content-box content-box2"></div>
+        <span class="content-span">海外标准法规</span>
+      </div>
+      <div class="content-top">
+        <div class="content-box content-box3"></div>
+        <span class="content-span">国内外政策</span>
+      </div>
+      <div class="content-top">
+        <div class="content-box content-box4"></div>
+        <span class="content-span">标准化动态</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "phoneHome",
+  data() {
+    return {
+      searchKey: "",
+    };
+  },
+  methods: {
+    onSearch() {
+      this.$router.push({
+        name: 'databaseSearch',
+        query: {
+          searchKey: this.searchKey
+        },
+      })
+      // this.$http.post('search/searchCenter/searchSarBykey',{
+      //   selectIndex: 'fulltextserch',
+      //   selectValue: this.searchKey,
+      //   selectType: 'titleSearch',
+      //   page: 1,
+      //   pageSize: 20
+      // },{
+      //   _this: this,
+      // }, res => {
+      //   console.log(res.data);
+      // })
+    },
+  }
+};
+</script>
+
+<style lang="less" scoped>
+#phone-home {
+  width: 100%;
+  height: 100%;
+  background: #F6F6F6;
+  .van-search .van-cell {
+    padding: 10px;
+  }
+  .search-top{
+     height: 200px;
+     width: 100%;
+     background: url("../../assets/images/phone/homeTop.png");
+     background-size:100% 100%;
+    .top-title{
+      position: absolute;
+      top: 15px;
+      left: 15px;
+      width: 30%;
+      height: 5%;
+      background: url("../../assets/images/phone/phoneTitle.png") no-repeat;
+      background-size: 100% 100%;
+    }
+    .home-title{
+      color: #FFFFFF;
+      position: absolute;
+      top: 12%;
+      left: 25%
+    }
+  }
+  .search-head{
+
+  }
+  .content {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: #F6F6F6;
+    .content-top {
+      width: 47%;
+      height: 150px;
+      line-height: 230px;
+      text-align: center;
+      background: #FFFFFF;
+      margin: 4px;
+      border-radius: 5px;
+      box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
+    }
+    .content-box{
+      display: inline-block;
+      width: 50px;
+      height: 50px;
+      position: absolute;
+      background-size: 100% 100%;
+    }
+    .content-box{
+      top: 39%;
+      left: 20%;
+      background: url("../../assets/images/phone/domesticStand.png");
+    }
+    .content-box2{
+      top: 39%;
+      left: 65%;
+      background: url("../../assets/images/phone/overseasStand.png");
+    }
+    .content-box3{
+      top: 58%;
+      left: 20%;
+      background: url("../../assets/images/phone/policyStand.png");
+    }
+    .content-box4{
+      top: 58%;
+      left: 65%;
+      background: url("../../assets/images/phone/dynamicsStand.png");
+    }
+    .content-span{
+      color: #000000;
+      font-size: 16px;
+      font-weight: 500;
+    }
+  }
+}
+</style>