foton-laws-system-front/src/pages/phone/phoneHome.vue

<template>
  <div id="phone-home" :style="'height:' + (screenHeight) + 'px'">
    <!-- 内容 -->
    <div class="search-top">
      <div class="top-title">
      </div>
      <h3 class="home-title">标 准 法 规 管 理 系 统 S R M S</h3>
    </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" @click="standChange('INLAND')">
        <div class="content-box content-box1"></div>
        <span class="content-span">国内标准法规</span>
      </div>
      <div class="content-top" style="margin-top: 10px" @click="standChange('FOREIGN')">
        <div class="content-box content-box2"></div>
        <span class="content-span">海外标准法规</span>
      </div>
      <div class="content-top" @click="standChange('POLICY')">
        <div class="content-box content-box3"></div>
        <span class="content-span">国内外政策</span>
      </div>
      <div class="content-top" @click="standChange('DYNAMIC')">
        <div class="content-box content-box4"></div>
        <span class="content-span">标准化动态</span>
      </div>
    </div>
  </div>
</template>

<script>
import vueCustomScrollbar from 'vue-custom-scrollbar'

export default {
  name: "phoneHome",
  components: {
    vueCustomScrollbar
  },
  data() {
    return {
      settings: {
        suppressScrollY: false,
        suppressScrollX: false,
        wheelPropagation: false
      },
      searchKey: "",
      screenWidth: document.body.offsetWidth - 141,
      screenHeight: document.documentElement.clientHeight,
    };
  },
  methods: {
    onSearch() {
      this.$router.push({
        name: 'databaseSearch',
        query: {
          searchKey: this.searchKey
        },
      })
    },
    standChange(type){
      if(type ==='DYNAMIC'){
        this.$router.push({
          name: 'standDynamics'
        })

      }else{
        this.$router.push({
          name: 'domesticStand',
          query:{
            standType: type,
          }
        })
      }
    },
  },
  mounted() {
    const that = this
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.offsetWidth
        that.$store.commit('width', window.screenWidth)
        that.screenWidth = window.screenWidth - 141
        window.screenHeight = document.documentElement.clientHeight
        that.$store.commit('height', window.screenHeight)
        that.screenHeight = window.screenHeight
        that.objs.bodyWidth = window.screenWidth
      })()
    }
  },
};
</script>

<style lang="less" scoped>
/deep/ .scroll-area {
  position: relative;
  margin: auto;
  width: 100%;
  height: 100%;
}

#phone-home {
  width: 100%;
  height: 100%;
  background: #F6F6F6;
  overflow: auto;
  .van-search .van-cell {
    padding: 10px;
  }
  .search-top{
     height: 4rem;
     width: 100vw;
     background: url("../../assets/images/phone/homeTop.png") no-repeat center;
     background-size:100vw 40vh;
     position: relative;
    .top-title{
      position: absolute;
      top: 15px;
      left: 15px;
      width: 23vw;
      height: 0.8rem;
      background: url("../../assets/images/phone/phoneTitle.png") no-repeat;
      background-size: 100% 100%;
    }
    .home-title{
      color: #FFFFFF;
      position: absolute;
      top: 1.5rem;
      left: 17.3vw;
    }
  }
  .search-head{

  }
  .content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background: #F6F6F6;
    .content-top {
      position: relative;
      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: 1rem;
      height: 1rem;
      position: absolute;
      background-size: 100% 100%;
    }
    .content-box1{
      top: 0.7rem;
      margin-left: 1.4em;
      /*left: 16.3vw;*/
      background: url("../../assets/images/phone/domesticStand.png");
    }
    .content-box2{
      top: 0.7rem;
      margin-left: 1.4em;
      /*left: 16.3vw;*/
      background: url("../../assets/images/phone/overseasStand.png");
    }
    .content-box3{
      top: 0.7rem;
      margin-left: 0.9em;
      /*left: 16.3vw;*/
      background: url("../../assets/images/phone/policyStand.png");
    }
    .content-box4{
      top: 0.7rem;
      margin-left: 0.9em;
      /*left: 16.3vw;*/
      background: url("../../assets/images/phone/dynamicsStand.png");
    }
    .content-span{
      color: #000000;
      font-size: 0.3rem;
      font-weight: 500;
    }
  }
}
</style>