|
|
@@ -0,0 +1,285 @@
|
|
|
+<template>
|
|
|
+ <div class="toupiao">
|
|
|
+ <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
|
|
|
+ <van-swipe-item>
|
|
|
+ <img
|
|
|
+ src="https://cxzx.smcic.net/topic/tool/img/tuanweitoupiao2024/Banner_1.jpg"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </van-swipe-item>
|
|
|
+ <van-swipe-item>
|
|
|
+ <img
|
|
|
+ src="https://cxzx.smcic.net/topic/tool/img/tuanweitoupiao2024/Banner_2.jpg"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </van-swipe-item>
|
|
|
+ </van-swipe>
|
|
|
+ <div class="js" v-show="active == 0">
|
|
|
+ <div class="js-main">
|
|
|
+ <h2 style="color: rgb(230, 0, 0); text-align: center; line-height: 2em">活动介绍</h2>
|
|
|
+ <p>
|
|
|
+ “‘中国梦·青年志’——寻找身边的‘陕西好青年’”主题活动由共青团陕西省委联合省委宣传部、省委网信办、省委政法委等11家单位共同开展挖掘树立来自基层、来自身边青年榜样，积极传播青春正能量、弘扬社会主义核心价值观的青年典型推选活动。
|
|
|
+ </p>
|
|
|
+ <br />
|
|
|
+ <p>
|
|
|
+ 第十一届“‘中国梦·青年志’——寻找身边的陕西好青年”主题活动将在全省各行业、各领域基层团员青年中遴选出爱岗敬业、创新创业、勤学上进、乡村振兴、崇德守信、平安正义、文化传承
|
|
|
+ 7 个类别“陕西好青年”个人 60 名，“陕西好青年”集体30 个。
|
|
|
+ </p>
|
|
|
+ <h2 style="color: rgb(230, 0, 0); text-align: center; line-height: 2em">活动时间</h2>
|
|
|
+ <h4>报名时间：</h4>
|
|
|
+ <p>2023-09-22 17:00至2023-09-28 17:00</p>
|
|
|
+ <h4>网络展示时间：</h4>
|
|
|
+ <p>2023-11-08 20:00至2023-11-20 09:00</p>
|
|
|
+ <h2 style="color: rgb(230, 0, 0); text-align: center; line-height: 2em">参与标准</h2>
|
|
|
+ <p>（一）好青年个人推选标准</p>
|
|
|
+ <p>
|
|
|
+ 1.拥护中国共产党领导，政治立场坚定，能够自觉树牢“四个意识”、坚定“四个自信”、做到“两个维护”;
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 2.个人年龄在 18 至 35 周岁之间（1988 年 9 月至 2005 年
|
|
|
+ 9月出生）的陕西籍或在陕西定居（学习、工作）的青年;
|
|
|
+ </p>
|
|
|
+ <p>3.勤于学习、善于创造、甘于奉献，个人事迹突出，曾获得过市级及以上表彰奖项;</p>
|
|
|
+ <p>4.遵纪守法、品德高尚、作风正派，具有良好的社会影响。</p>
|
|
|
+ <br />
|
|
|
+ <p>（二）好青年集体推选标准</p>
|
|
|
+ <p>1.成员拥护中国共产党的领导，热爱祖国、热爱人民、热爱社会主义、遵纪守法、品德高尚；</p>
|
|
|
+ <p>2.成员以18至35周岁在陕西工作或生活的青年为主体，占集体总人数比例不低于75%；</p>
|
|
|
+ <p>
|
|
|
+ 3.在重要领域建设、重点工程项目、助力乡村振兴、传承弘扬中华优秀文化、处置突发事件和具有广泛社会影响的重大事件中发挥关键作用，取得突出业绩。
|
|
|
+ </p>
|
|
|
+ <h2 style="color: rgb(230, 0, 0); text-align: center; line-height: 2em">网络点赞</h2>
|
|
|
+ <div>点赞规则：每个微信每天只能为同一选手点赞1次。</div>
|
|
|
+ <h2 style="color: rgb(230, 0, 0); text-align: center; line-height: 2em">联系电话</h2>
|
|
|
+ <h4 style="text-align: center; line-height: 2em">029-88403732</h4>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-show="active == 1">
|
|
|
+ <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 style="position: relative">
|
|
|
+ <van-search
|
|
|
+ v-model="value"
|
|
|
+ style="width: 90%; margin: 0 auto; padding: 5px 0"
|
|
|
+ shape="round"
|
|
|
+ background="#d91c21"
|
|
|
+ placeholder="请输入选手编号/名称"
|
|
|
+ >
|
|
|
+ </van-search>
|
|
|
+ <van-button
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ round
|
|
|
+ color="#ff493f"
|
|
|
+ style="position: absolute; top: 0.5em; right: 2.5em"
|
|
|
+ @click="value = ''"
|
|
|
+ >
|
|
|
+ 搜 索
|
|
|
+ </van-button>
|
|
|
+ </div> -->
|
|
|
+ <br />
|
|
|
+ <div class="main">
|
|
|
+ <van-row gutter="20">
|
|
|
+ <van-col span="12" v-for="(item, index) in data" :key="index">
|
|
|
+ <div ref="width"></div>
|
|
|
+ <div class="item">
|
|
|
+ <img :src="item.userCover" :style="'width: ' + rw + 'px;height: ' + rh + 'px'" />
|
|
|
+ <div class="line1" v-text="item.userVoteNum + '赞'"></div>
|
|
|
+ <div class="line2" v-text="item.userNumber + '号' + item.userName"></div>
|
|
|
+ </div>
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="line-height: 2.5em; text-align: center; color: #ffffff">
|
|
|
+ 联系方式： 029-88403732
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script setup>
|
|
|
+import { ref, onMounted } from 'vue';
|
|
|
+// import { onMounted, reactive } from "vue";
|
|
|
+// import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
|
|
|
+/**
|
|
|
+ * window.$originData.orginParames.title 页面标题
|
|
|
+ * window.$originData.orginParames.parameters 固定参数值
|
|
|
+ * window.$originData.urlParames url参数
|
|
|
+ */
|
|
|
+import data from '../../assets/js/output';
|
|
|
+const active = ref(1);
|
|
|
+const width = ref(null);
|
|
|
+const rw = ref(0);
|
|
|
+const rh = ref(0);
|
|
|
+onMounted(() => {
|
|
|
+ rw.value = width.value[0].offsetWidth - 22;
|
|
|
+ rh.value = (rw.value / 2.5) * 3.5;
|
|
|
+});
|
|
|
+// const value = ref('');
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+* {
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+.toupiao {
|
|
|
+ width: 100vw;
|
|
|
+ max-width: 500px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding-bottom: 1em;
|
|
|
+ min-height: 100vh;
|
|
|
+ font-weight: 500;
|
|
|
+ background-color: #d91c21;
|
|
|
+}
|
|
|
+
|
|
|
+.js {
|
|
|
+ position: relative;
|
|
|
+ margin: 0.4rem 0.24rem 0;
|
|
|
+ padding: 6px;
|
|
|
+ background: -webkit-gradient(linear, left bottom, left top, from(#ff9547), to(#ffaf59));
|
|
|
+ background: -webkit-linear-gradient(bottom, #ff9547 0%, #ffaf59 100%);
|
|
|
+ background: linear-gradient(0deg, #ff9547 0%, #ffaf59 100%);
|
|
|
+ -webkit-box-shadow: 0 0.1rem 0.3rem 0 rgba(239, 23, 49, 0.13);
|
|
|
+ box-shadow: 0 0.1rem 0.3rem rgba(239, 23, 49, 0.13);
|
|
|
+ border-radius: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.js-main {
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 0.3rem 16px;
|
|
|
+ line-height: 1.5em;
|
|
|
+ color: #172832 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.title {
|
|
|
+ color: #ffdc97;
|
|
|
+ text-align: center;
|
|
|
+ padding: 1em 0;
|
|
|
+ font-size: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+.toupiao-content1 {
|
|
|
+ background-image: url('https://cxzx.smcic.net/topic/tool/img/tuanweitoupiao2024/bg1.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-position: 5%;
|
|
|
+ width: 90%;
|
|
|
+ padding: 0.5em 0;
|
|
|
+ color: #a47b52;
|
|
|
+ margin: 3em auto 0 auto;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.toupiao-content1::after {
|
|
|
+ display: inline-block;
|
|
|
+ position: absolute;
|
|
|
+ content: '活动已结束';
|
|
|
+ font-size: 18px;
|
|
|
+ color: #ffffff;
|
|
|
+ top: -0.8em;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+}
|
|
|
+
|
|
|
+.toupiao-content2 {
|
|
|
+ text-align: left;
|
|
|
+ padding: 1.5em 0;
|
|
|
+}
|
|
|
+
|
|
|
+.toupiao-content2::after {
|
|
|
+ content: '活动规则';
|
|
|
+}
|
|
|
+
|
|
|
+.num1 {
|
|
|
+ height: 2em;
|
|
|
+ line-height: 2em;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #ef1430;
|
|
|
+}
|
|
|
+
|
|
|
+.mun2 {
|
|
|
+ font-size: 16px;
|
|
|
+ padding: 0.5em 0 1em 0;
|
|
|
+}
|
|
|
+
|
|
|
+.main {
|
|
|
+ width: 90%;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+
|
|
|
+.item {
|
|
|
+ margin: 5px 0 0 0;
|
|
|
+ border: 6px solid #ffa754;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 0.5em;
|
|
|
+ background-color: #ffffff;
|
|
|
+}
|
|
|
+
|
|
|
+.line1 {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 1.4em;
|
|
|
+ color: #ef1430;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 2em;
|
|
|
+}
|
|
|
+
|
|
|
+.line2 {
|
|
|
+ line-height: 2em;
|
|
|
+ color: #3f1f00;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 1em;
|
|
|
+}
|
|
|
+</style>
|
liyongli