提交

src/view/toupiao/index.vue

@@ -128,10 +128,13 @@
       <br />
       <div class="main">
         <van-row gutter="20">
-          <van-col span="12" v-for="(item, index) in data" :key="index">
+          <van-col span="12" v-for="(item, index) in data" :key="index" @click="toDetail(item)">
             <div ref="width"></div>
             <div class="item">
-              <img :src="item.userCover" :style="'width: ' + rw + 'px;height: ' + rh + 'px'" />
+              <img
+                :src="item.userCover"
+                :style="'width: ' + rw + 'px;height: ' + rh + 'px;border-radius: 0.2em;'"
+              />
               <div class="line1" v-text="item.userVoteNum + '赞'"></div>
               <div class="line2" v-text="item.userNumber + '号' + item.userName"></div>
             </div>
@@ -148,6 +151,10 @@
       <van-tabbar-item icon="records">介绍</van-tabbar-item>
       <van-tabbar-item icon="comment">点赞</van-tabbar-item>
     </van-tabbar>
+
+    <van-action-sheet v-model:show="show" :title="selectData.userName">
+      <div class="content" v-html="selectData.userDetail"></div>
+    </van-action-sheet>
   </div>
 </template>
 <script setup>
@@ -160,6 +167,8 @@ import { ref, onMounted } from 'vue';
  * window.$originData.urlParames url参数
  */
 import data from '../../assets/js/output';
+const show = ref(false);
+const selectData = ref({});
 const active = ref(1);
 const width = ref(null);
 const rw = ref(0);
@@ -169,6 +178,12 @@ onMounted(() => {
   rh.value = (rw.value / 2.5) * 3.5;
 });
 // const value = ref('');
+
+const toDetail = item => {
+    console.log(item);
+    selectData.value = item;
+    show.value = true;
+}
 </script>
 <style>
 * {
@@ -241,6 +256,7 @@ onMounted(() => {
 
 .toupiao-content2::after {
   content: '活动规则';
+  top: -0.4em;
 }
 
 .num1 {
@@ -282,4 +298,8 @@ onMounted(() => {
   text-align: center;
   margin-bottom: 1em;
 }
+
+.content {
+  padding: 16px 16px 160px;
+}
 </style>