Merge branch 'main' of https://git.zdool.com/xs/yxdt/h5 into main

src/App.vue

@@ -14,7 +14,7 @@ import { useRoute, useRouter } from 'vue-router'
 // const route = useRoute() 
 // let routePath = ref(route.path)
 const router = useRouter()
-let bt_data = reactive([{ btname: '优惠服务', imgurl: s1, simgurl: sl1 ,path:'/'}, { btname: '生活助手', imgurl: s2, simgurl: sl2 ,path:'/chat'}, { btname: '智能优推', imgurl: s3, simgurl: sl3,path:'/' }, { btname: '大众点评', imgurl: s4, simgurl: sl4 ,path:'/'}])
+let bt_data = reactive([{ btname: '优惠服务', imgurl: s1, simgurl: sl1 ,path:'/'}, { btname: '生活助手', imgurl: s2, simgurl: sl2 ,path:'/chat'}, { btname: '智能优推', imgurl: s3, simgurl: sl3,path:'/znyt' }, { btname: '大众点评', imgurl: s4, simgurl: sl4 ,path:'/'}])
 
 let selctdeNum = ref(0)
 let clickNum = (num,path) => {

src/components/list-no-img.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="list-1">
+    <div class="top">
+      <strong :class="[newData.title.length < 40 ? 'yesDevelop' : 'noDevelop']"
+        >{{ newData.title
+        }}<a
+          href="javascript:;"
+          v-if="newData.title.length > 40"
+          @click="quanwen"
+          >全文</a
+        ></strong
+      >
+    </div>
+    <div class="bottom-1">
+      <div class="left">{{ newData.createdAt }}</div>
+      <div class="right">
+        <img src="@/assets/eye.png" alt="" />{{ newData.eye }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, defineProps } from "vue";
+const props = defineProps(["newData"]);
+const quanwen = () => {
+  console.log("全文");
+};
+</script>
+
+<style lang='scss' scoped>
+.list-1 {
+  padding-left: 16px;
+  padding-right: 16px;
+  .top {
+    display: flex;
+    justify-content: space-between;
+    margin-left: 6px;
+
+    .noDevelop {
+      display: inline-block;
+      width: 343px;
+      height: 44px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      font-size: 15px;
+      font-weight: 500;
+      line-height: 22px;
+      position: relative;
+    }
+
+    a {
+      display: inline-block;
+      width: 35px;
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      background-color: #fff;
+      color: #87ceeb;
+      font-size: 15px;
+    }
+
+    .noDevelop::after {
+      content: "...";
+      width: 16px;
+      position: absolute;
+      bottom: 0;
+      right: 35px;
+      background-color: #fff;
+    }
+
+    .yesDevelop {
+      display: inline-block;
+      width: 343px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      font-size: 15px;
+      font-weight: 500;
+      line-height: 22px;
+      position: relative;
+      font-family: PingFang SC, PingFang SC;
+    }
+  }
+
+  .bottom-1 {
+    display: flex;
+    justify-content: space-between;
+    margin-left: 6px;
+    margin-top: 9px;
+    font-size: 12px;
+    color: #999999;
+    .left {
+      align-items: center;
+    }
+    .right {
+      display: flex;
+      align-items: center;
+      img {
+        width: 12px;
+        height: 12px;
+        margin-right: 4px;
+      }
+    }
+  }
+}
+</style>

src/components/list-right-img.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="list-1">
+    <div class="left">
+      <strong :class="[newData.title.length < 26 ? 'yesDevelop' : 'noDevelop']"
+        >{{ newData.title
+        }}<a
+          href="javascript:;"
+          v-if="newData.title.length > 26"
+          @click="quanwen"
+        >
+          全文</a
+        ></strong
+      >
+      <div class="bottom-1">
+        <div class="left">{{ newData.createdAt }}</div>
+        <div class="right">
+          <img src="@/assets/eye.png" alt="" />{{ newData.eye }}
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <img src="@/assets/cc3.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+const props = defineProps(["newData"]);
+const quanwen = () => {
+  console.log("全文");
+};
+</script>
+
+<style lang='scss' scoped>
+.list-1 {
+  display: flex;
+  min-height: 70px;
+  justify-content: space-around;
+  padding-left: 12px;
+  padding-right: 12px;
+
+  .left {
+    width: 230px;
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .noDevelop {
+      display: inline-block;
+      width: 231px;
+      height: 44px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      font-size: 15px;
+      font-weight: 500;
+      line-height: 22px;
+      position: relative;
+    }
+
+    a {
+      display: inline-block;
+      width: 35px;
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      background-color: #fff;
+      color: #87ceeb;
+      font-size: 15px;
+    }
+
+    .noDevelop::after {
+      content: "...";
+      width: 16px;
+      position: absolute;
+      bottom: 0;
+      right: 35px;
+      background-color: #fff;
+    }
+
+    .yesDevelop {
+      display: inline-block;
+      width: 231px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      font-size: 15px;
+      font-weight: 500;
+      line-height: 22px;
+      position: relative;
+    }
+    .bottom-1 {
+      display: flex;
+      justify-content: space-between;
+      // margin-left: 6px;
+      margin-top: 9px;
+      font-size: 12px;
+      color: #999999;
+      .left {
+        // align-items: center;
+      }
+      .right {
+        display: flex;
+        align-items: center;
+        img {
+          width: 12px;
+          height: 12px;
+          margin-right: 4px;
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 94px;
+
+    img {
+      width: 100px;
+      height: 72px;
+      border-radius: 6px;
+    }
+  }
+}
+</style>

src/router/index.js

@@ -40,7 +40,15 @@ const router = createRouter({
       // this generates a separate chunk (About.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
       component: () => import('../views/test1.vue')
-    }
+    },
+    {
+      path: '/znyt',
+      name: 'znyt',
+      // route level code-splitting
+      // this generates a separate chunk (About.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import('../views/znyt.vue')
+    },
   ]
 })
 

src/views/znyt.vue

@@ -0,0 +1,308 @@
+<template>
+  <div class="body">
+    <div class="top">
+      <div class="content" v-for="(item, index) in topContent" :key="index">
+        <div class="biaoqian">{{ item.biaoqian }}</div>
+        <div class="title">
+          {{ item.content }}
+        </div>
+        <div class="time">
+          <div class="left">{{ item.time }}</div>
+          <div class="right">
+            <img src="@/assets/eye.png" alt="" />
+            <div>{{ item.eye }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="main">
+      <div class="main-t">
+        <div class="main-title">
+          <div
+            class="main-list"
+            :class="[chooseId == item.id ? 'a' : '']"
+            v-for="(item, index) in mainList"
+            :key="index"
+            @click="choose(item.id)"
+          >
+            <div :class="[chooseId == item.id ? 'a' : '']">
+              {{ item.title }}
+            </div>
+            <img
+              src="@/assets/xia.png"
+              alt=""
+              style="width: 48px; height: 5px; margin-bottom: 10px"
+              v-if="chooseId == item.id"
+            />
+          </div>
+        </div>
+        <img src="@/assets/list.png" alt="" />
+      </div>
+      <div class="list">
+        <div class="list-item">
+          <div v-for="(data, index) in records.list" :key="data.id">
+            <listNoImg v-if="data.display == 0" :newData="data" />
+            <listRightImg v-if="data.display == 1" :newData="data" />
+            <div class="line"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, reactive } from "vue";
+import listRightImg from "@/components/list-right-img.vue";
+import listNoImg from "@/components/list-no-img.vue";
+const topContent = reactive([
+  {
+    content: "2024年养老金发放政策：工龄30年内统一发放3200元，可行吗？",
+    time: "11月27日",
+    eye: "8888",
+    biaoqian: "热门话题",
+  },
+  {
+    content: "2024年养老金发放政策：工龄30年内统一发放3200元，可行吗？",
+    time: "11月27日",
+    eye: "8888",
+    biaoqian: "政策资源",
+  },
+  {
+    content: "2024年养老金发放政策：工龄30年内统一发放3200元，可行吗？",
+    time: "11月27日",
+    eye: "8888",
+    biaoqian: "政策资源",
+  },
+]);
+const mainList = reactive([
+  {
+    id: 1,
+    title: "老有康养",
+  },
+  {
+    id: 2,
+    title: "老有康养",
+  },
+  {
+    id: 3,
+    title: "老有康养",
+  },
+  {
+    id: 4,
+    title: "老有康养",
+  },
+  {
+    id: 5,
+    title: "老有康养",
+  },
+  {
+    id: 6,
+    title: "老有康养",
+  },
+  {
+    id: 7,
+    title: "老有康养",
+  },
+]);
+const chooseId = ref("1");
+const choose = (id) => {
+  chooseId.value = id;
+  //   console.log()
+};
+const records = reactive({
+  list: [
+    {
+      id: 1,
+      display: 0,
+      title: "2023年养老金政策震撼发布！你的养老金将发生这样的变化！",
+      createdAt: "11月27日",
+      eye: "8888",
+    },
+    {
+      id: 1,
+      display: 1,
+      title: "“三问”个人养老金：是什么、怎么缴、如何领？",
+      createdAt: "11月27日",
+      eye: "8888",
+    },
+        {
+      id: 1,
+      display: 0,
+      title: "2023年养老金政策震撼发布！你的养老金将发生这样的变化！",
+      createdAt: "11月27日",
+      eye: "8888",
+    },
+    {
+      id: 1,
+      display: 1,
+      title: "“三问”个人养老金：是什么、怎么缴、如何领？",
+      createdAt: "11月27日",
+      eye: "8888",
+    },
+        {
+      id: 1,
+      display: 0,
+      title: "2023年养老金政策震撼发布！你的养老金将发生这样的变化！",
+      createdAt: "11月27日",
+      eye: "8888",
+    },
+    {
+      id: 1,
+      display: 1,
+      title: "“三问”个人养老金：是什么、怎么缴、如何领？",
+      createdAt: "11月27日",
+      eye: "8888",
+    },
+  ],
+});
+</script>
+<style lang="scss" scoped>
+.body {
+  box-sizing: border-box;
+  //   width: 100%;
+  // height: 100%;
+  //    border: 1px solid red;
+  .top {
+    width: 100vw;
+    padding: 16px 0px 16px 16px;
+    overflow-x: auto;
+    display: flex;
+    .content {
+      position: relative;
+      width: 300px;
+      height: 144px;
+      background: #ffffff;
+      box-shadow: 0px 2px 12px 0px #ebeef3;
+      border-radius: 10px 10px 10px 10px;
+      opacity: 1;
+      // display: flex;
+      flex-shrink: 0;
+      // margin: 16px 16px 16px 16px;
+      margin-right: 12px;
+      padding-left: 16px;
+      padding-right: 16px;
+      // &:last-child {
+      //   margin-right: 16px;
+      // }
+      .biaoqian {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 70px;
+        height: 24px;
+        background: #457aff;
+        opacity: 1;
+        border-radius: 10px 0px 10px 0px;
+        font-size: 12px;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500;
+        color: #ffffff;
+        line-height: 12px;
+        text-align: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .title {
+        margin-top: 44px;
+        width: 268px;
+        height: 48px;
+        font-size: 16px;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 600;
+        color: #333333;
+        line-height: 24px;
+        //   white-space: nowrap;
+        overflow: hidden;
+        //   text-overflow: ellipsis;
+      }
+      .time {
+        margin-top: 24px;
+        font-size: 12px;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 400;
+        color: #999999;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .right {
+          display: flex;
+          align-items: center;
+          img {
+            width: 12px;
+            height: 12px;
+            margin-right: 4px;
+          }
+        }
+      }
+    }
+  }
+  .main {
+    box-sizing: border-box;
+    // border: 1px solid red;
+    // padding: 16px;
+    padding-top: 0;
+    // overflow: hidden;
+    background-color: #ffffff;
+    height: 68vh;
+    .main-t {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding-left: 16px;
+      padding-right: 16px;
+      .main-title {
+        width: 85vw;
+        height: 50px;
+        overflow-y: auto;
+        display: flex;
+        // border: 1px solid red;
+        align-items: center;
+        .main-list {
+          flex-shrink: 0;
+          min-width: 56px;
+          height: 14px;
+          font-size: 14px;
+          font-family: PingFang SC, PingFang SC;
+          font-weight: 400;
+          color: #666666;
+          line-height: 14px;
+          margin-right: 22px;
+          //   text-align: center;
+        }
+      }
+      img {
+        width: 16px;
+        height: 16px;
+      }
+    }
+    .list {
+      //   box-sizing: border-box;
+      width: 100vw;
+      height: 59vh;
+      overflow: auto;
+        // border: 1px solid yellow;
+    }
+  }
+}
+.a {
+  width: 72px !important;
+  font-size: 18px !important;
+  font-family: PingFang SC, PingFang SC;
+  font-weight: 600 !important;
+  color: #333333 !important;
+  line-height: 16px !important;
+}
+::-webkit-scrollbar {
+  display: none;
+}
+.line {
+  width: 100%;
+  height: 0px;
+  border-radius: 0px 0px 0px 0px;
+  opacity: 1;
+  border: 1px solid #f1f1f1;
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+</style>