修改样式

src/views/zhongchou/index.vue

@@ -9,7 +9,7 @@
             </div>
 
             <!-- 活动规则按钮 -->
-            <div class="rules-btn" @click="showRules">
+            <div class="rules-btn" @click="showRulesFunc">
                 <img src="@/assets/img/zhongchou/活动需知.png" alt="活动规则" />
                 <span class="rules-text">活动规则</span>
             </div>
@@ -112,12 +112,11 @@
                     <div class="modal-text">
                         <div class="rules-list">
                             <p>1. 活动时间为2025年7月26日-2025年8月5日。</p>
-                            <p>2. 每人每天有3个活动助力参与机会。</p>
-                            <p>3. 助力时间为15分钟，每一个人参与助力，即可时间</p>
-                            <p> 分钟！</p>
-                            <p>4. 助力成功后，平台服务市场将获取实时数据！</p>
-                            <p>5. 平台对数据众筹上线后，您的方案数据将优化成对应</p>
-                            <p> 大数据的实时数据优化参考。</p>
+                            <p>2. 每人每天每个活动可以参与一次。</p>
+                            <p>3. 初始时间为15分钟，每一百人参与助力，即可扣减一分钟！</p>
+                            <p>4. 助力成功后，对应股票市场将开放实时数据！</p>
+                            <p>5. 实时数据众筹上线后，您助力的次数会转化成对应天数的实时数据</p>
+                            <p>体验卡。</p>
                         </div>
                     </div>
                     <div class="close-btn" @click="hideRules"></div>
@@ -370,6 +369,7 @@ const hideRules = () => {
     justify-content: center;
     flex: 1;
     gap: 10px;
+    margin-left: 70px;
 }
 
 /* 主标题图片响应式样式 */
@@ -391,14 +391,14 @@ const hideRules = () => {
 
 .rules-btn img {
     width: auto;
-    height: 40px;
+    height: 45px;
     margin-bottom: 5px;
 }
 
 .rules-text {
-    color: #fff;
-    font-size: 12px;
-    font-weight: 500;
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 1rem;
+    font-weight: 700;
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
     white-space: nowrap;
 }
@@ -423,7 +423,8 @@ const hideRules = () => {
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center;
-    font-size: 1.2rem;
+    font-size: 1.4rem;
+    font-weight: 700;
     color: rgba(255, 255, 255, 0.9);
     display: inline-block;
     padding: 10px 20px;
@@ -535,7 +536,7 @@ const hideRules = () => {
 /* 股票卡片样式 */
 .stock-card {
     width: 100%;
-    height: auto;
+    height: 345px;
     background-size: 100% 100%;
     background-position: center;
     background-repeat: no-repeat;
@@ -708,6 +709,7 @@ const hideRules = () => {
     background-position: center;
     width: 240px;
     height: 80px;
+    margin-top: -30px;
 }
 
 /* 美股助力按钮 */
@@ -975,8 +977,8 @@ const hideRules = () => {
 
 .modal-content {
     position: relative;
-    width: 500px;
-    height: 400px;
+    width: 620px;
+    height: 450px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -993,7 +995,7 @@ const hideRules = () => {
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
-    padding: 40px 30px 30px 30px;
+    padding: 50px 40px 40px 40px;
     box-sizing: border-box;
 }
 
@@ -1015,9 +1017,10 @@ const hideRules = () => {
 }
 
 .rules-list p {
-    margin: 8px 0;
-    font-size: 0.9rem;
+    margin: 10px 0;
+    font-size: 16px;
     color: #fff;
+    line-height: 1.7;
 }
 
 .close-btn {
@@ -1025,8 +1028,8 @@ const hideRules = () => {
     background-size: 100%;
     background-repeat: no-repeat;
     background-position: center;
-    width: 120px;
-    height: 40px;
+    width: 160px;
+    height: 60px;
     cursor: pointer;
     transition: transform 0.2s ease;
 }