From 8a44fe9d1c4f518e082132b6c2186cdf8d7e5388 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A9=99=E5=AD=90?= <454313500@qq.com>
Date: Sat, 8 Oct 2022 23:05:19 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8E=A8=E8=8D=90=E9=A1=B5=E9=9D=A2=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Yi.Vue3.x.Vant/components.d.ts             |   1 +
 Yi.Vue3.x.Vant/src/main.ts                 |   1 +
 Yi.Vue3.x.Vant/src/view/main/recommend.vue | 119 +++++++++++++++------
 3 files changed, 89 insertions(+), 32 deletions(-)

diff --git a/Yi.Vue3.x.Vant/components.d.ts b/Yi.Vue3.x.Vant/components.d.ts
index d50cac2e..48d7adcb 100644
--- a/Yi.Vue3.x.Vant/components.d.ts
+++ b/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']
diff --git a/Yi.Vue3.x.Vant/src/main.ts b/Yi.Vue3.x.Vant/src/main.ts
index dfa5f30d..c67a29ae 100644
--- a/Yi.Vue3.x.Vant/src/main.ts
+++ b/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'
 
diff --git a/Yi.Vue3.x.Vant/src/view/main/recommend.vue b/Yi.Vue3.x.Vant/src/view/main/recommend.vue
index 45aeb838..bf0a98a8 100644
--- a/Yi.Vue3.x.Vant/src/view/main/recommend.vue
+++ b/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>
\ No newline at end of file