iot-wap/src/pages/home/Index.vue

<template>
  

  <div style="height: 100vh; overflow: hidden; display: flex; flex-direction: column;">

    <!-- 店铺名称 -->
    <div style="padding: 10px 16px 0px 16px;
      background-image: url('static/images/bg-home.png');
      background-repeat: no-repeat;
      background-position-y: 0px;
      background-size: 100% 120%;">
      <div style="display: flex; 
        justify-content:space-between; 
        align-items:center;
        color: #ffffff;">
        <div style="font-size: 20px; font-weight: bold;">
          <span>工作台</span>
        </div>
        <div style="line-height: 0px;">
          <van-icon name="static/images/icon-search-white.png" size="1.6rem" />
        </div>
      </div>
      <div style="margin-top: 20px; display: flex; 
        justify-content:space-between; 
        align-items:center;
        color: #ffffff;">
        <div style="font-size: 16px;">
          <span>Hi，</span>
          <span>龙三郎</span>
        </div>
      </div>
      <div style="margin-top: 10px; line-height: 0px;">
        <van-image
          width="100%"
          fit="contain"
          src="static/images/banner.png"
        />
      </div>
    </div>

    <!-- 九宫格 -->
    <div>
      <van-grid :square="false" :clickable="false" :border="false" column-num="2" gutter="16">
        <van-grid-item>
          <div style="width: 100%; text-align: left;">
            <div style="font-size: 1rem; color: #969799;">
              <span>个人设备</span>
            </div>
            <div style="font-size: 1rem; display: flex;
              justify-content: space-between;
              align-items: baseline;">
              <div style="display: flex; align-items: baseline;">
                <div style="font-size: 2rem; font-weight: bold;">2640</div>
                <div style="margin-left: 5px; font-size: 1rem; color: #969799;">台</div>
              </div>
              <div>
                <van-icon name="static/images/icon-device2.png" size="1.6rem" />
              </div>
            </div>
          </div>
        </van-grid-item>
        <van-grid-item>
          <div style="width: 100%; text-align: left;">
            <div style="font-size: 1rem; color: #969799;">
              <span>产品类型</span>
            </div>
            <div style="font-size: 1rem; display: flex;
              justify-content: space-between;
              align-items: baseline;">
              <div style="display: flex; align-items: baseline;">
                <div style="font-size: 2rem; font-weight: bold;">5</div>
                <div style="margin-left: 5px; font-size: 1rem; color: #969799;">类</div>
              </div>
              <div>
                <van-icon name="static/images/icon-type.png" size="1.6rem" />
              </div>
            </div>
          </div>
        </van-grid-item>
      </van-grid>
    </div>


    <!-- 新闻 -->
    <div style="padding: 0px 20px;">
      <div style="
        display: flex; 
        justify-content: space-between; 
        border-radius: 2px;
        align-items: center;
      ">
        <div>
          <div style="font-weight: bold; display: flex; align-items: center;">
            <van-icon name="label-o" size="1.1rem" />
            <span style="margin-left: 4px;">新闻</span>
          </div>
        </div>
        <div style="color: #0047FF; font-size: 0.9rem; display: flex; align-items: baseline;">
          <span style="margin-right: 3px;">换一批</span>
          <van-icon name="replay" size="1rem" />
        </div>
      </div>
    </div>


    <!-- 文章列表 -->
    <div style="padding: 0px 0px 0px 0px; height: 0px; flex-grow: 1; overflow-y: auto;">

      <van-cell v-for="item in 10" clickable>
        <div style="height: 80px; display: flex;">
          <div style="margin-right: 18px;">
            <van-image
              width="80"
              height="80"
              radius="6"
              src="static/images/banner.png"
            />
          </div>
          <div style="width: 0px; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between;">
            <div style="font-weight: bold; text-align: left; color: #000;">
              <span>{{ item }}、公务员考试笔试，政审都过了，单位叫我去上班我要去吗？</span>
            </div>
            <div style="display: flex; justify-content: space-between; color: #969799;">
              <div>河南新闻</div>
              <div>2024-06-11</div>
            </div>
          </div>
        </div>
      </van-cell>
      
    </div>



      


    <div style="height: 60px;"></div>

  </div>

  
</template>

<script setup lang="ts">
  // import { onMounted, reactive } from 'vue';
  // import { useRouter } from 'vue-router';
  // import { showToast } from 'vant';
  // import 'vant/es/toast/style';
  // import { checkPhone } from '@/utils/util'

  // const router = useRouter();
  // const opt = reactive({
  //   type: 1,
  //   show: false,
  //   name: '',
  //   mobile: '',
  //   isAnonymous: false,
  // })

  // 提交
  // const confirm = () => {
  //   console.log('confirm');
  //   // 非匿名，需要验证姓名和手机号
  //   if(!opt.isAnonymous){
  //     if(!opt.name){
  //       showToast('请输入姓名');
  //       return;
  //     }
  //     if(!checkPhone(opt.mobile)){
  //       showToast('请正确的手机号');
  //       return;
  //     }
  //   }
  //   let url = '';
  //   const query = '?isAnonymous=' + opt.isAnonymous + '&name=' + opt.name + '&mobile=' + opt.mobile;
  //   if(opt.type == 1){
  //     url = '/sales/add';
  //   }else if(opt.type == 2){
  //     url = '/recycle/add';
  //   }
  //   url += query;
    
  //   // 路由跳转
  //   router.push(url);

  // }
  
  // 生命周期函数
  // onMounted(() => {
  //   console.log('onMounted')

  //   // 阻止页面退出
  //   history.pushState(null, 'null', document.URL);
  //   window.addEventListener('popstate', function(){
  //     history.pushState(null, 'null', document.URL);
  //   },false);

  // })
  


</script>

<style scoped>


</style>