推荐页面优化

Yi.Vue3.x.Vant/components.d.ts

@@ -18,6 +18,7 @@ declare module '@vue/runtime-core' {
     VanGridItem: typeof import('vant/es')['GridItem']
     VanIcon: typeof import('vant/es')['Icon']
     VanImage: typeof import('vant/es')['Image']
+    VanImagePreview: typeof import('vant/es')['ImagePreview']
     VanList: typeof import('vant/es')['List']
     VanPullRefresh: typeof import('vant/es')['PullRefresh']
     VanRow: typeof import('vant/es')['Row']

Yi.Vue3.x.Vant/src/main.ts

@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import './style.css'
+import 'vant/es/image-preview/style';
 import router from './router'
 import App from './App.vue'
 

Yi.Vue3.x.Vant/src/view/main/recommend.vue

@@ -8,9 +8,7 @@
       @load="onLoad"
     >
       <van-row v-for="item in list" :key="item" class="row">
-        
-     
-        <van-col span="6" class="leftCol">
+        <van-col span="4" class="leftCol">
           <van-image
             round
             width="3rem"
@@ -19,24 +17,40 @@
           />
         </van-col>
 
-        <van-col span="12">
-            标题
-            <br>
-            副标题
+        <van-col span="14" class="centerTitle">
+       <span class="justtitle">   大白</span>
+          <br />
+          <span class="subtitle">一小时前</span>
         </van-col>
 
         <van-col span="6">
-            <van-icon name="arrow-down" @click="show=true" />
+          <van-icon name="arrow-down" @click="show = true" />
         </van-col>
 
+        <van-col class="rowBody" span="24"
+          >这是第:{{
+            item
+          }}个,不要害怕重新开始，因为这一次你不是从头开始，而是从经验开始</van-col
+        >
 
+        <van-col
+          span="8"
+          v-for="item of 9"
+          :key="item"
+          class="imageCol"
+          @click="imageShow = true"
+          ><van-image
+            width="100%"
+            height="7rem"
+            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+            radius="5"
+          />
+        </van-col>
 
-        <van-col class="rowBody" span="24">这是第:{{ item }}个</van-col>
-
-        <van-col span="24">
+        <van-col span="24" class="bottomRow">
           <van-grid direction="horizontal" :column-num="3">
             <van-grid-item icon="share-o" text="分享" />
-            <van-grid-item icon="comment-circle-o" text="评论" />
+            <van-grid-item icon="comment-o" text="评论" />
             <van-grid-item icon="good-job-o" text="点赞" />
           </van-grid>
         </van-col>
@@ -44,30 +58,54 @@
     </van-list>
   </van-pull-refresh>
 
-
-
   <!-- 功能页面 -->
   <van-action-sheet
-  v-model:show="show"
-  :actions="actions"
-  cancel-text="取消"
-  description="这是一段描述信息"
-  close-on-click-action
-/>
+    v-model:show="show"
+    :actions="actions"
+    cancel-text="取消"
+    description="这是一段描述信息"
+    close-on-click-action
+  />
+
+  <!-- 图片预览 -->
+  <van-image-preview
+    v-model:show="imageShow"
+    :images="images"
+    @change="onChange"
+    :closeable=true
+  >
+    <template v-slot:index>第{{ index }}页</template>
+  </van-image-preview>
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue";
+import { ImagePreview, Toast } from "vant";
+
+const VanImagePreview = ImagePreview.Component;
+
+
+const imageShow = ref(false);
+const index = ref(0);
+const images = [
+  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg",
+  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg",
+];
+const onChange = (newIndex: any) => {
+  index.value = newIndex;
+};
+
 const list = ref<Number[]>([]);
 const loading = ref(false);
 const finished = ref(false);
 const refreshing = ref(false);
+
 const show = ref(false);
-    const actions = [
-      { name: '选项一' },
-      { name: '选项二' },
-      { name: '选项三', subname: '描述信息' },
-    ];
+const actions = [
+  { name: "选项一" },
+  { name: "选项二" },
+  { name: "选项三", subname: "描述信息" },
+];
 const onLoad = () => {
   setTimeout(() => {
     if (refreshing.value) {
@@ -98,7 +136,7 @@ const onRefresh = () => {
 </script>
 <style scoped>
 .list {
-  background-color: #EFEFEF;
+  background-color: #efefef;
 }
 .row {
   background-color: white;
@@ -107,18 +145,35 @@ const onRefresh = () => {
   padding-left: 1rem;
 }
 .rowBody {
+  text-align: left;
   background-color: white;
-  min-height: 7rem;
+  min-height: 2rem;
 }
 .title {
-    padding-top: 1rem;
+  padding-top: 1rem;
 
   min-height: 3rem;
   text-align: left;
 }
-.leftCol
-{
-align-content: left;
-text-align: left;
+.leftCol {
+  align-content: left;
+  text-align: left;
+}
+.centerTitle {
+  text-align: left;
+}
+.imageCol {
+  padding: 0.1rem 0.1rem 0.1rem 0.1rem;
+}
+.subtitle{
+color: #CBCBCB;
+
+}
+
+.justtitle{
+  font-size: large;
+}
+.bottomRow{
+  color: #979797;
 }
 </style>