提交

src/view/CalligraphyAndPaintingCompetition/index.vue

@@ -12,7 +12,7 @@
       </div>
     </div>
 
-    <van-overlay :show="toShanshipin">
+    <van-overlay :custom-style="{'background-color': 'rgba(0, 0, 0, .4)'}" :show="toShanshipin">
       <div class="dialogBody">
         <van-image width="100" height="100" :src="logoImage" round />
         <div class="title">请打开闪视频投稿或查看我的作品</div>
@@ -25,23 +25,63 @@
           @click="toShanshipinFunc"
           >打开闪视频</van-button
         >
-        <van-icon
-          name="close"
-          class="closeBtn"
-          size="25"
-          @click="toShanshipin = false"
-          color="#ffffff"
-        />
+        <div class="closeBtn" @click="toShanshipin = false">
+          <img
+            style="width: 20px; height: 20px"
+            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAWhJREFUOBG1lL1OwzAUheuEIUJMDAwwMLEhRQkTG7xKaYFXgkIfhyk/ikQmBl6ADcYo4Zxgu0lrOxYCD7Xje87Xe28cz2YYWZbtl2V5xvVvRlVV53VdH9IrCBNCvHddd4T5MU3Te8ydDxgeURTFA+YlPF9RFJ0GYRieEEYA5lsIniicAlIjtUvpPWia5jhIkuSNmSkAhPMp6AA2Vz4wVnEcvwbckGWuVdAFtcDWYNzRr0tzCBeqpz4aDSTdZWBctmJYJjPTf0jNCMgNG1TGnDBqdoDSqN6gBnBfDbRgJzMdU4vt2ZQpNS4Y4/1b5uKvxv+XbCqVZbICxHRPbaXvDUu1wXg0qMOx0VDC5bP52LhgyKa/LHw0fQ99hKqSKW1fcp7nKxgm+0Mos8VYmMpH+IYH+LJt2xeKOWzN/olufk2Z4iq8DgD4UD2C/Hn729wgxit6pFbfUkjss1fx+memY4v/E/xXaNsFHd9CLmBlRyZwLQAAAABJRU5ErkJggg=="
+          />
+        </div>
       </div>
     </van-overlay>
 
-    <van-dialog theme="round-button" confirm-button-color="linear-gradient(90deg, #0038ad, #004fd9)" v-model:show="toDetail" title="活动详情"> 活动详情 </van-dialog>
+    <van-dialog
+      theme="round-button"
+      confirm-button-text="关 闭"
+      confirm-button-color="linear-gradient(90deg, #0038ad, #004fd9)"
+      v-model:show="toDetail"
+      title="详情"
+    >
+      <div class="DetailMain">
+        <p class="DetailLine">活动说明</p>
+        <p class="DetailLine">1.活动名称：2023“我心中的黄帝陵”青少年书画活动</p>
+        <p class="DetailLine">
+          2.主办单位：陕西省委网信办、共青团陕西省委、陕西省祭陵办
+        </p>
+        <p class="DetailLine">
+          3.参与对象：全省各单位青年、高校学生、中小学学生
+        </p>
+        <p class="DetailLine">
+          4.征集主题：以书法、绘画作品的形式表现自己对“黄帝”文化的理解、对“黄帝”形象的领悟。
+        </p>
+        <p class="DetailLine">5.征稿时间：2023年4月</p>
+        <p class="DetailLine">
+          6.评选方式：评选阶段分为初评和终评。通过初评的作品在“闪视频”、“西部网教育”微信公众号展示。通过初评的选手将参加现场创作活动，由专家评审团现场评审选出优秀作品，评审结果将在“西部网教育”微信公众号发布。
+        </p>
+
+        <p class="DetailLine">活动规则</p>
+        <p class="DetailLine">
+          1.全省各单位青年、高校学生、中小学学生均可投稿；投稿作品需符合主题要求，内容应健康、积极向上，具有艺术感、想象力和创造性，拒绝模版化作品。
+        </p>
+        <p class="DetailLine">
+          2.投稿者应保证其为所投作品的作者，并对该作品的整体及局部均拥有独立、完整、明确、无争议的著作权；作者还应保证其所投送的作品不侵犯第三人的包括著作权、肖像权、名誉权、隐私权等在内的合法权益。
+        </p>
+        <p class="DetailLine">
+          3.主办方有权免费使用本次书画活动的作品，包括出版画册、举办展览和相关宣传推广等。
+        </p>
+      </div>
+    </van-dialog>
   </div>
 </template>
 <script setup>
 import { ref } from 'vue';
 // import { onMounted, reactive } from "vue";
-import { isIpad, isIpod, isIphone, isAndroid, isWechat } from '../../utils/isTerminal';
+import {
+  isIpad,
+  isIpod,
+  isIphone,
+  isAndroid,
+  isWechat,
+} from '../../utils/isTerminal';
 /**
  * window.$originData.orginParames.title 页面标题
  * window.$originData.orginParames.parameters 固定参数值
@@ -120,16 +160,23 @@ function toShanshipinFunc() {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    padding: 1em 1em 0 1em;
+    padding: 1em 1em 1em 1em;
     width: 90%;
     margin: 0 auto;
     border-radius: 15px;
     background-color: #ffffff;
 
     .closeBtn {
+      width: 40px;
+      height: 40px;
+      padding-top: 10px;
+      border-radius: 50%;
       left: 50%;
       bottom: -4em;
       transform: translateX(-50%);
+      position: absolute;
+      background-color:rgba(0, 0, 0, .4);
+      text-align: center;
     }
 
     .van-image {
@@ -145,5 +192,17 @@ function toShanshipinFunc() {
       text-align: center;
     }
   }
+
+  .DetailMain {
+    padding: 0 26px;
+    max-height: 250px;
+    overflow: auto;
+
+    .DetailLine {
+      padding-bottom: 1em;
+      color: #666;
+      line-height: 1.5em;
+    }
+  }
 }
 </style>