From 0772024600fde693d475f541eba9398b28dc1f36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B2=B3=E4=BD=B3=E9=91=AB?= <yuejx@dongwu-inc.com>
Date: Fri, 30 Sep 2022 10:25:47 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E4=BF=AE=E6=94=B9=E4=BA=86=E5=85=B6?=
 =?UTF-8?q?=E4=BB=96=E6=B4=BB=E5=8A=A8=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/activities/ActivitiesPage.vue | 275 +++++++-----------------
 1 file changed, 81 insertions(+), 194 deletions(-)

diff --git a/src/views/activities/ActivitiesPage.vue b/src/views/activities/ActivitiesPage.vue
index 9ce7bdd..e58e6bb 100644
--- a/src/views/activities/ActivitiesPage.vue
+++ b/src/views/activities/ActivitiesPage.vue
@@ -1,15 +1,14 @@
 <template>
   <div class="activities" >
-    <TitleHead text="【其他活动】管理者进阶腾飞班 - 专属线下活动"></TitleHead>
-     <div class="message" >
-          <div class="yes"></div>
-          <div class="textmessage">签到成功</div>
-          <div class="no"></div>
-    </div>
     <div class="main" >
+      <div class="notice">
+      <span class="text">请各位选课的同学提前阅读本课程的“教学大纲与计划请各位选课的同学提前阅读本课程的“教学大纲与计划</span> <span class="close"></span>
+      </div>
       <div class="title">
         <div class="titlemain">
+          
           <div class="timeposition">
+            <div calss="titlecontent" style="font-size: 14px; font-weight: bold; line-height: 21.6px; margin-bottom: 8px;">管理者进阶腾飞班 - 专属线下活动</div>
             <div class="time">
               <img
                 style="width: 13px; height: 14.5px; margin-right: 5.5px"
@@ -32,50 +31,22 @@
           <el-button class="titlebtn" @click="open">签到</el-button>
         </div>
       </div>
+      <div class="details">
+        <div class="details_title">活动详情</div>
+        <div class="details_content">大族广场写字楼采用国际顶级硬件设施，美国OTIS电梯、麦克维尔中央空调、高端安防系统等商务空间新标准匹配项目在亦庄地标综合体的形象。写字楼空间设计由亚洲著名的室内空间设计大师之一梁景华设计，写字楼群由六栋(T1—T6)呈舰队排列的5A写字楼构成形成独特的舰队造型。<br>购物中心介绍<br>大族广场Mall&More位于北京经济技术开发区核心商圈荣华路，由荷兰鹿特丹缤纷市场设计师HANS VAN DALEN 主持设计,秉持自然与未来和谐共生理念,倡导乐活、有机、绿色环保的生活方式,传递生活美学。<br>大族广场Mall&More汇集众多知名优质品牌,7FRESH生鲜超市、CGV星聚汇影城、中信书店、源力悦体等,集购物、餐饮娱乐、文化于一体,丰富的业态品类为消费者提供城市生活的第三空间感受。<br>大族广场Mall&More以人为本,不断提升服务水平,升级消费购物体验,致力于营造更加舒适的购物环境与空间,打造有温度的品牌。同时根据春夏秋冬四季策划丰富多样的大型主题活动；为会员设置专属的沙龙活动，打造专属会员日等</div>
+      </div>
     </div> 
-    <div class="notice">
-        <div class="noticebox">
-        <div class="mani">
-          <div class="lefttitle">
-            <div class="img"></div>
-            <div class="rightmain">
-              <div class="talk">活动公告</div>
-              <div class="box"></div>
-            </div>
-          </div>
-          <div class="content">
-            为拓宽人民群众的表达途径、畅听民意，及时了解和解决人民群众反映强烈的公共法律服务问题，我局将在浈江区公共法律服务中心开展领导干部接待活动，<br>现将2022年8月的活动安排公告如下：<br> 一、接待时间 <br>工作日上午9:00-12:00。 <br>二、接待地点 <br>浈江区公共法律服务中心（浈江区新韶镇乐土路3号曲仁田螺冲党群服务中心一楼）。<br>三、接待受理范围 <br>（一）听取人民群众对公共法律服务工作的批评和意见建议。 <br>（二）解答或接收公共法律服务相关业务咨询。
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="details">
-      <div class="teachbox">
-        <div class="teachmani">
-          <div class="lefttitle">
-            <div class="img"></div>
-            <div class="rightmain">
-              <div class="talk">活动详情</div>
-              <div class="box"></div>
-            </div>
-          </div>
-         <div class="content">
-            写字楼介绍<br>大族广场写字楼采用国际顶级硬件设施，美国OTIS电梯、麦克维尔中央空调、高端安防系统等商务空间新标准匹配项目在亦庄地标综合体的形象。写字楼空间设计由亚洲著名的室内空间设计大师之一梁景华设计，写字楼群由六栋(T1—T6)呈舰队排列的5A写字楼构成形成独特的舰队造型。<br>购物中心介绍<br>大族广场Mall&More位于北京经济技术开发区核心商圈荣华路，由荷兰鹿特丹缤纷市场设计师HANS VAN DA LEN 主持设计,秉持自然与未来和谐共生理念,倡导乐活有机、绿色环保的生活方式,传递生活美学。<br>大族广场Mall&More汇集众多知名优质品牌,7FRESH生 鲜超市、CGV星聚汇影城、中信书店、源力悦体等,集 购物、餐饮、娱乐、文化于一体,丰富的业态品类为消费 者提供城市生活的第三空间感受。<br>大族广场Mall&More以人为本,不断提升服务水平,升级 消费购物体验,致力于营造更加舒适的购物环境与空间打造有温度的品牌。同时根据春夏秋冬四季策划丰富多样的大型主题活动；为会员设置专属的沙龙活动，打造专属会员日等,与顾客近距离产生情感上的互动与链接为城市人们提供自由、放松、愉悦的社交空间与精神的栖息地。
-         </div>
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 
 
 <script>
 // import { reactive, toRefs } from "vue";
-import TitleHead from "@/components/TitleHead.vue";
+//import TitleHead from "@/components/TitleHead.vue";
 export default {
   name: "ActivitiesPage",
   components: {
-    TitleHead,
+    //TitleHead,
   },
   setup() {   
     
@@ -90,18 +61,54 @@ export default {
   .main {
     width: 100%;
     display: flex;
+    flex-direction: column;
+    align-items: center;
     justify-content: center;
-    margin-top: -14.5px;
+    //margin-top: -14.5px;
+    .notice {
+      background-color: rgba(255, 251, 238, 1);
+      width: 100%;
+      height: 25px;
+      display: flex;
+      jusyift-content: center;
+      //position: relative;
+      .text {
+        //display: flex;
+        height: 25px;
+        //position: absolute;
+        color: rgba(255, 158, 0, 1);
+        padding: 6px 41px 6.5px 15.5px;
+        font-size: 12px;
+        //line-height: 24px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+      .close {
+        display: flex;
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 9.5px;
+        height: 9.5px;
+        background-image: url(../../assets/image/pathmap/close.png);
+        margin-top: 10px;
+        margin-right: 16px;
+        margin-bottom: 8px;
+      }
+     }
     .title {
-      width: 90%;
-      height: 74px;
-      border-radius: 4px;
+      width: 100%;
+      //height: 74px;
+      //border-radius: 4px;
       background-color: rgba(255, 255, 255, 1);
       display: flex;
       justify-content: center;
       .titlemain {
         width: 90%;
         display: flex;
+        margin-top: 10px;
+        margin-bottom: 15px;
         justify-content: space-between;
         align-items: center;
         .timeposition {
@@ -113,9 +120,9 @@ export default {
         .titlebtn {
           width: 83px;
           height: 33px;
-          background: #2478ff;
-          box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
-          border-radius: 2px;
+          background: rgba(0, 150, 250, 1);
+          //box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
+          border-radius: 6px;
           display: flex;
           align-items: center;
           justify-content: center;
@@ -127,153 +134,33 @@ export default {
         }
       }
     }
-  }
-}
-.message {
+    .details {
+      width: 100%;
+      margin-top: 11.5px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      background-color: rgba(255, 255, 255, 1);
+      .details_title {
+            width:100%;
+            display: flex;
+            font-size: 16px;
+            font-weight: 500;
+            line-height: 12px;
+            color: rgba(13, 35, 58, 1);
+            padding: 17px 0 17px 36.5px;
+            border-bottom: 0.5px solid rgba(241, 242, 243, 1);
+        }
+      .details_content {
         display: flex;
-        position: absolute;
-        top: 194px;
-        left: 80.5px;
-        width: 234px;
-        height: 64px;
-        z-index: 1;
-        background-image: url(../../assets/image/activities/bg.png);
-        .textmessage {
-          margin-top: 18px;
-          margin-left: 46px;
-          color: #333330;
-          font-size: 13px;
-          font-weight: 700;
-        }
-        .yes {
-          width: 13px;
-          height: 13px;
-          margin-top: 19px;
-          margin-left: 32px;
-          background-image: url(../../assets/image/activities/yes.png);
-        }
-        .no {
-          width: 13px;
-          height: 13px;
-          margin-top: 19px;
-          margin-left: 50px;
-          background-image: url(../../assets/image/activities/no.png);
-        }
+        width: 90%;
+        margin-top: 15px;
+        font-size: 13px;
+        color: rgba(110, 123, 132, 1);
+        line-height: 30.29px;
+      }
+    }
+  }
 }
-.notice {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    margin-top: 10px;
-    .noticebox {
-      width: 90%;
-      display: flex;
-      justify-content: center;
-      background: linear-gradient(
-        180deg,
-       rgba(36, 120, 255, 0.15) 0%,
-        white 20%
-      );
-      border-radius: 4px;
-      position: relative;
-      
-      .mani {
-        width: 90%;
-        dispaly: flex;
-        margin-top: 20px;
-        .lefttitle {
-          display: flex;
-          position: relative;
-          width: 90px;
-          .img {
-            width: 18px;
-            height: 15px;
-            margin-top: 4px;
-            background-image: url(../../assets/image/activities/trumpet.png);
-          }
-          .rightmain {
-            margin-left: 7.5px;
-            .talk {
-              font-size: 14px;
-              font-weight: bold;
-              color: #333;
-              position: absolute;
-              z-index: 999;
-            }
-            .box {
-              position: absolute;
-              width: 62.5px;
-              height: 10px;
-              right: 6px;
-              bottom: -4px;
-              background: #cccfff;
-            }
-          }
-        }
-        .content {
-          color: #333330;
-          font-size: 13px;
-          line-height: 24px;
-          font-weight: 400;
-          margin: 18.5px 0 29.5px 0;
-        }
-      }
-    }
-  }
-  .details {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    margin-top: 10px;
-    .teachbox {
-      width: 90%;
-      // height: 200px;
-      margin-bottom: 29.5px;
-      background: #fff;
-      border-radius: 4px;
-      position: relative;
-      display: flex;
-      justify-content: center;
-      .teachmani {
-        width: 90%;
-        margin-top: 20px;
-        .lefttitle {
-          display: flex;
-          position: relative;
-          width: 90px;
-          .img {
-            width: 18px;
-            height: 15px;
-            margin-top: 4px;
-            background-image: url(../../assets/image/activities/trumpet.png);
-          }
-          .rightmain {
-            margin-left: 7.5px;
-            .talk {
-              font-size: 14px;
-              font-weight: bold;
-              color: #333;
-              position: absolute;
-              z-index: 999;
-            }
-            .box {
-              position: absolute;
-              width: 62.5px;
-              height: 10px;
-              right: 6px;
-              bottom: -4px;
-              background: #cccfff;
-            }
-          }
-        }
-        .content {
-          color: #333330;
-          font-size: 13px;
-          line-height: 24px;
-          font-weight: 400;
-          margin: 18.5px 0 29.5px 0;
-        }
-      }
-    }
-  }
+  
 </style>
\ No newline at end of file