提交

src/view/toupiao/index.vue

@@ -142,6 +142,127 @@
         </van-row>
       </div>
     </div>
+    <div v-if="active == 2">
+      <div class="title">第十一届“陕西好青年”候选人选风采展示</div>
+      <div class="toupiao-content1">
+        <img
+          src="https://cxzx.smcic.net/topic/tool/img/tuanweitoupiao2024/bg-title.png"
+          style="width: 100%; margin-top: -1.6em"
+        />
+        <van-row style="padding: 0 0.5em">
+          <van-col span="8">
+            <div class="num1">5605410</div>
+            <div class="mun2">总赞数</div>
+          </van-col>
+          <van-col span="8">
+            <div class="num1">91</div>
+            <div class="mun2">选手</div>
+          </van-col>
+          <van-col span="8">
+            <div class="num1">9432448</div>
+            <div class="mun2">访问量</div>
+          </van-col>
+        </van-row>
+      </div>
+      <div class="toupiao-content1 toupiao-content2">
+        <img
+          src="https://cxzx.smcic.net/topic/tool/img/tuanweitoupiao2024/bg-title.png"
+          style="width: 100%; margin-top: -2.6em"
+        />
+
+        <van-row style="padding: 0 0.5em">
+          <van-col span="8" style="text-align: right">
+            <van-icon name="clock-o" />
+            点赞开始：
+          </van-col>
+          <van-col span="16">2023-11-08 16:00:00</van-col>
+        </van-row>
+        <van-row style="padding: 0 0.5em">
+          <van-col span="8" style="text-align: right">
+            <van-icon name="clock-o" />
+            点赞截止：
+          </van-col>
+          <van-col span="16">2023-11-20 09:00:00</van-col>
+        </van-row>
+        <van-row style="padding: 0 0.5em">
+          <van-col span="8" style="text-align: right">
+            <van-icon name="clock-o" />
+            点赞规则：
+          </van-col>
+          <van-col span="16">每个账号每天可为同一候选人点赞1次</van-col>
+        </van-row>
+      </div>
+      <br />
+      <div class="main">
+        <div class="type" style="border-radius: 6px; background-color: #ffffff">
+          <div
+            style="width: 25%; text-align: center; display: inline-block; padding: 5px 0"
+            v-for="item in btnTypeData"
+            :key="item"
+          >
+            <van-button
+              @click="btnType = item"
+              :color="btnType === item ? '#ff5b4a' : '#fde7ea'"
+              round
+              size="small"
+              style="width: 90%"
+            >
+              {{ item }}
+            </van-button>
+          </div>
+        </div>
+        <br />
+        <br />
+        <div class="toupiao-content3" style="margin-left: 0; margin-right: 0; width: 100%">
+          <img
+            src="https://cxzx.smcic.net/topic/tool/img/tuanweitoupiao2024/bg-title.png"
+            style="width: 100%; margin-top: -2.6em"
+          />
+
+          <div style="margin: 0 16px; background-color: #fff; padding: 0.5em; border-radius: 6px">
+            <template v-for="(v, index) in data" :key="index">
+              <van-cell v-if="v.userGroup === btnType || btnType === '全部'">
+                <template #title>
+                  <img
+                    v-if="v.userRanking <= 3"
+                    :src="require('../../assets/img/toupiao/top' + v.userRanking + '.png')"
+                    style="width: 2em; vertical-align: middle"
+                  />
+                  <span
+                    style="
+                      display: inline-block;
+                      text-align: center;
+                      width: 2em;
+                      vertical-align: middle;
+                    "
+                    v-text="v.userRanking"
+                    v-else
+                  ></span>
+
+                  <img
+                    :src="v.userCover"
+                    style="
+                      width: 4em;
+                      height: 4em;
+                      border-radius: 50%;
+                      margin-left: 5px;
+                      vertical-align: middle;
+                    "
+                  />
+                  <div style="display: inline-block; vertical-align: middle">
+                    <p style="margin-left: 0.5em">{{ v.userNumber }}号</p>
+                    <span style="margin-left: 0.5em">{{ v.userName }}</span>
+                  </div>
+                </template>
+                <template #right-icon>
+                    <span style="font-size: 14px;color: #ee1430;">{{ v.userVoteNum }}赞</span>
+                </template>
+              </van-cell>
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
 
     <div style="line-height: 2.5em; text-align: center; color: #ffffff">
       联系方式： 029-88403732
@@ -150,6 +271,7 @@
     <van-tabbar v-model="active" active-color="#ee1430" inactive-color="#f68996">
       <van-tabbar-item icon="records">介绍</van-tabbar-item>
       <van-tabbar-item icon="comment">点赞</van-tabbar-item>
+      <van-tabbar-item icon="bars">排行</van-tabbar-item>
     </van-tabbar>
 
     <van-action-sheet v-model:show="show" :title="selectData.userName">
@@ -167,12 +289,26 @@ import { ref, onMounted } from 'vue';
  * window.$originData.urlParames url参数
  */
 import data from '../../assets/js/output';
+const btnType = ref('全部');
+const btnTypeData = ref([]);
 const show = ref(false);
 const selectData = ref({});
 const active = ref(1);
 const width = ref(null);
 const rw = ref(0);
 const rh = ref(0);
+
+const li = ['全部'],
+  obj = {};
+for (let i = 0; i < data.length; i++) {
+  const v = data[i];
+  if (!obj[v.userGroup]) {
+    obj[v.userGroup] = true;
+    li.push(v.userGroup);
+  }
+}
+btnTypeData.value = li;
+
 onMounted(() => {
   rw.value = width.value[0].offsetWidth - 22;
   rh.value = (rw.value / 2.5) * 3.5;
@@ -180,10 +316,9 @@ onMounted(() => {
 // const value = ref('');
 
 const toDetail = item => {
-    console.log(item);
-    selectData.value = item;
-    show.value = true;
-}
+  selectData.value = item;
+  show.value = true;
+};
 </script>
 <style>
 * {
@@ -193,7 +328,7 @@ const toDetail = item => {
   width: 100vw;
   max-width: 500px;
   margin: 0 auto;
-  padding-bottom: 1em;
+  padding-bottom: 3em;
   min-height: 100vh;
   font-weight: 500;
   background-color: #d91c21;
@@ -258,6 +393,24 @@ const toDetail = item => {
   content: '活动规则';
   top: -0.4em;
 }
+.toupiao-content3 {
+  text-align: left;
+  padding: 1.5em 0;
+  background-color: #fda148;
+  border-radius: 6px;
+  position: relative;
+}
+
+.toupiao-content3::after {
+  content: '排行榜';
+  top: -0.4em;
+  display: inline-block;
+  position: absolute;
+  font-size: 18px;
+  color: #ffffff;
+  left: 50%;
+  transform: translateX(-50%);
+}
 
 .num1 {
   height: 2em;