提交

src/view/SilkRoadShanShiPinList/index.vue

@@ -1,127 +1,159 @@
 <template>
-	<div class="SilkRoadShanShiPinList">
-		<img src="../../assets/img/soundbyte.jpg" style="width: 100%;" />
-		<div class="guize" @click="showGuize">投票规则</div>
-		<van-cell-group title="团队组" style="padding: 8px;">
-			<van-row gutter="8">
-				<van-col span="12" v-for="item in list" :key="item.id">
-					<van-image :width="width" :height="height" fit="cover" position="left"
-						:src="item.file + '?x-oss-process=video/snapshot,t_100,f_jpg,m_fast'" />
-					<van-row>
-						<van-col span="18">{{item.name}}</van-col>
-						<van-col span="6">
-							<van-button type="primary" size="mini" @click="()=>toupiao(item)">投票</van-button>
-						</van-col>
-					</van-row>
-					<br />
-				</van-col>
-			</van-row>
-		</van-cell-group>
-		<van-cell-group title="个人组" style="padding: 8px">
-			<van-row gutter="8">
-				<van-col span="12" v-for="item in listSelf" :key="item.id">
-					<van-image :width="width" :height="height" fit="cover" position="left"
-						:src="item.file + '?x-oss-process=video/snapshot,t_100,f_jpg,m_fast'" />
-					<van-row>
-						<van-col span="18">{{item.name}}</van-col>
-						<van-col span="6">
-							<van-button type="primary" size="mini" @click="()=>toupiao(item)">投票</van-button>
-						</van-col>
-					</van-row>
-					<br />
-				</van-col>
-			</van-row>
-		</van-cell-group>
-		<br />
-	</div>
+  <div class="SilkRoadShanShiPinList">
+    <img src="../../assets/img/soundbyte.jpg" style="width: 100%" />
+    <div class="guize" @click="showGuize">投票规则</div>
+    <van-cell-group title="团队组" style="padding: 8px">
+      <van-row gutter="8">
+        <van-col span="12" v-for="item in list" :key="item.id">
+          <van-image
+            :width="width"
+            :height="height"
+            fit="cover"
+            position="left"
+            :src="
+              item.file + '?x-oss-process=video/snapshot,t_100,f_jpg,m_fast'
+            "
+          />
+          <van-row>
+            <van-col span="18">{{ item.name }}</van-col>
+            <van-col span="6">
+              <van-button
+                type="primary"
+                size="mini"
+                @click="() => toupiao(item)"
+                >投票</van-button
+              >
+            </van-col>
+          </van-row>
+          <br />
+        </van-col>
+      </van-row>
+    </van-cell-group>
+    <van-cell-group title="个人组" style="padding: 8px">
+      <van-row gutter="8">
+        <van-col span="12" v-for="item in listSelf" :key="item.id">
+          <van-image
+            :width="width"
+            :height="height"
+            fit="cover"
+            position="left"
+            :src="
+              item.file + '?x-oss-process=video/snapshot,t_100,f_jpg,m_fast'
+            "
+          />
+          <van-row>
+            <van-col span="18">{{ item.name }}</van-col>
+            <van-col span="6">
+              <van-button
+                type="primary"
+                size="mini"
+                @click="() => toupiao(item)"
+                >投票</van-button
+              >
+            </van-col>
+          </van-row>
+          <br />
+        </van-col>
+      </van-row>
+    </van-cell-group>
+    <br />
+  </div>
 </template>
 <script setup>
-	import {
-		ref
-	} from "vue";
-	import {
-		showDialog
-	} from "vant";
-	// import { onMounted, reactive } from "vue";
-	// import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
-	import {
-		getEnrollList,
-		getVote
-	} from "@/api/SilkRoadSpringGala.js";
-	/**
-	 * window.$originData.orginParames.title 页面标题
-	 * window.$originData.orginParames.parameters 固定参数值
-	 * window.$originData.urlParames url参数
-	 */
-	const w = window.$originData.orginParames.availWidth || 0;
-	const width = ref((w - 16) / 2);
-	const height = ref(width.value * 0.57);
-	console.log(window.$originData, window.$shanshipin);
-	const list = ref([]);
-	getEnrollList({
-		type: '团队',
-		operateId: 2
-	}).then(r => {
-		list.value = r || [];
-	})
-	const listSelf = ref([]);
-	getEnrollList({
-		type: '个人',
-		operateId: 2
-	}).then(r => {
-		listSelf.value = r || [];
-	})
+import { ref } from "vue";
+import { showDialog } from "vant";
+// import { onMounted, reactive } from "vue";
+// import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
+import { getEnrollList, getVote } from "@/api/SilkRoadSpringGala.js";
+/**
+ * window.$originData.orginParames.title 页面标题
+ * window.$originData.orginParames.parameters 固定参数值
+ * window.$originData.urlParames url参数
+ */
+const w = window.$originData.orginParames.availWidth || 0;
+const width = ref((w - 16) / 2);
+const height = ref(width.value * 0.57);
+console.log(window.$originData, window.$shanshipin);
+const list = ref([]);
+getEnrollList({
+  type: "团队",
+  operateId: 2,
+}).then(r => {
+  list.value = r || [];
+});
+const listSelf = ref([]);
+getEnrollList({
+  type: "个人",
+  operateId: 2,
+}).then(r => {
+  listSelf.value = r || [];
+});
 
+const toupiao = function () {
+  getVote({
+    target: 15658745826,
+    source: 17691223263,
+    client: "闪视频",
+    operateId: 2,
+  }).then(r => {
+    console.log(r);
+  });
+};
 
-	const toupiao = function() {
-		getVote({
-			target:15658745826,
-			source: 17691223263,
-			client: '闪视频',
-			operateId: 2
-		}).then(r => {
-			console.log(r)
-		})
-	}
-
-	const showGuize = () => {
-		showDialog({
-			title: "活动规则",
-			messageAlign: "left",
-			confirmButtonText: "关闭",
-			message: () => ( < div class = "art" >
-				<
-				p > 1、 活动主题：“ 大美中国· 多彩丝路”《 2023 丝路嘉年华· 丝路春晚》 之我要上丝路春晚。 < /p> <
-				p > 2、 活动时间： 即日起至12月20日海选报名 + 节目征集， 12 月21日 - 22 日线上海选， 12 月23日 - 26 日网络投票。 < /p> <
-				p > 3、 征集范围： 各群体组织及社会民间文艺团体、 凡有才艺者， 且创作内容符合节目要求的团体和个人。 < /p> <
-				p >
-				4、 内容形式： 节目内容以“ 大美中国· 多彩丝路” 为主题， 健康、 积极向上， 具备中国文化特色的创意表演， 节目形式包括但不限于情景歌舞、 演唱等， 以及其他适合舞台表演和电视呈现的艺术形式。 <
-				/p> <
-				p >
-				5、 上传规则： 参与报名的团体、 个人将录制好的高清视频作品上传至闪视频APP， 个人节目不超过3分钟， 团体节目不超过5分钟。 <
-				/p> < /
-				div >
-			),
-		});
-	};
+const showGuize = () => {
+  showDialog({
+    title: "活动规则",
+    messageAlign: "left",
+    confirmButtonText: "关闭",
+    message: () => (
+      <div class="art">
+        <p>
+          {" "}
+          1、 活动主题：“ 大美中国· 多彩丝路”《 2023 丝路嘉年华· 丝路春晚》
+          之我要上丝路春晚。{" "}
+        </p>{" "}
+        <p>
+          {" "}
+          2、 活动时间： 即日起至12月20日海选报名 + 节目征集， 12 月21日 - 22
+          日线上海选， 12 月23日 - 26 日网络投票。{" "}
+        </p>{" "}
+        <p>
+          {" "}
+          3、 征集范围： 各群体组织及社会民间文艺团体、 凡有才艺者，
+          且创作内容符合节目要求的团体和个人。{" "}
+        </p>{" "}
+        <p>
+          4、 内容形式： 节目内容以“ 大美中国· 多彩丝路” 为主题， 健康、
+          积极向上， 具备中国文化特色的创意表演， 节目形式包括但不限于情景歌舞、
+          演唱等， 以及其他适合舞台表演和电视呈现的艺术形式。{" "}
+        </p>{" "}
+        <p>
+          5、 上传规则： 参与报名的团体、
+          个人将录制好的高清视频作品上传至闪视频APP， 个人节目不超过3分钟，
+          团体节目不超过5分钟。{" "}
+        </p>{" "}
+      </div>
+    ),
+  });
+};
 </script>
 <style lang="scss">
-	.SilkRoadShanShiPinList {
-		width: 100vw;
-		height: 100vh;
+.SilkRoadShanShiPinList {
+  width: 100vw;
+  height: 100vh;
 
-		.guize {
-			background-color: #ff2c2c;
-			position: fixed;
-			right: 0;
-			top: 2em;
-			color: #fff;
-			font-weight: 400;
-			font-size: 16px;
-			padding: 3px 5px 3px 15px;
-			border-top-left-radius: 1em;
-			border-bottom-left-radius: 1em;
-			z-index: 11;
-		}
-	}
+  .guize {
+    background-color: #ff2c2c;
+    position: fixed;
+    right: 0;
+    top: 2em;
+    color: #fff;
+    font-weight: 400;
+    font-size: 16px;
+    padding: 3px 5px 3px 15px;
+    border-top-left-radius: 1em;
+    border-bottom-left-radius: 1em;
+    z-index: 11;
+  }
+}
 </style>