优化移动端样式

src/views/CommitteeAppointment/size1920/index.vue

@@ -3,7 +3,7 @@
     <!-- 标题区 -->
     <section class="hero-section">
       <div class="container">
-        <h1>Committee Appointments</h1>
+        <h1>Committee Composition</h1>
       </div>
     </section>
 

src/views/CommitteeAppointment/size375/index.vue

@@ -28,7 +28,7 @@
               >
                 {{ director.name }}
               </router-link>
-              <p class="director-title">{{ director.title }}</p>
+              <!-- <p class="director-title">{{ director.title }}</p> -->
             </div>
           </div>
         </div>
@@ -51,9 +51,7 @@
                   "
                 >
                   <span>{{ getCommitteeRole(director.name, committee) }}</span>
-                  <span class="committee-name">{{
+                  <span class="committee-name"></span>
-                    getCommitteeShortName(committee)
-                  }}</span>
                 </div>
               </template>
             </div>
@@ -84,19 +82,19 @@ const committeeRoles = {
   "Cao Yu": {},
   "David Lazar": {},
   "Hu Bin": {
-    Compensation: "Chair",
+    Compensation: "Audit Committee ",
-    Governance: "Member",
+    Governance: "Compensation Committee",
-    Audit: "Member",
+    Audit: "Nominating Committee",
   },
   "David Natan": {
-    Compensation: "Member",
+    Compensation: "Audit Committee ",
-    Governance: "Chair",
+    Governance: "Compensation Committee",
-    Audit: "Chair",
+    Audit: "Nominating Committee",
   },
   "Chan Oi Fat": {
-    Compensation: "Member",
+    Compensation: "Audit Committee ",
-    Governance: "Member",
+    Governance: "Compensation Committee",
-    Audit: "Member",
+    Audit: "Nominating Committee",
   },
 };
 
@@ -144,14 +142,16 @@ const getInitials = (name) => {
 
 /* 页面样式 */
 .board-members-page {
-  background-color: #faf9ff;
+  background-image: url("@/assets/image/bg.png");
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
   min-height: 100vh;
 }
 
 .container {
   padding: 0 16px;
   margin: 0 auto;
-  max-width: 768px;
 }
 
 /* 头部样式 */
@@ -163,7 +163,7 @@ const getInitials = (name) => {
   );
   padding: 3rem 1rem;
   text-align: center;
-  color: white;
+  color: #895bff;
   margin-bottom: 2rem;
 }
 

src/views/companyoverview/size375/index.vue

@@ -58,9 +58,12 @@
               <n-h3 class="timeline-year">{{
                 $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING")
               }}</n-h3>
+              <br />
               <n-p class="timeline-desc">{{
                 $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.ONE")
               }}</n-p>
+              <br />
+
               <n-p class="timeline-desc">{{
                 $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.TWO")
               }}</n-p>
@@ -74,9 +77,13 @@
               <n-h3 class="timeline-year">{{
                 $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTWO")
               }}</n-h3>
+              <br />
+
               <n-p class="timeline-desc">{{
                 $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.ONE")
               }}</n-p>
+              <br />
+
               <n-p class="timeline-desc">{{
                 $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.TWO")
               }}</n-p>
@@ -90,10 +97,13 @@
               <n-h3 class="timeline-year">{{
                 $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTHREE")
               }}</n-h3>
+              <br />
 
               <n-p class="timeline-desc">{{
                 $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.ONE")
               }}</n-p>
+              <br />
+
               <n-p class="timeline-desc">{{
                 $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.TWO")
               }}</n-p>
@@ -107,9 +117,13 @@
               <n-h3 class="timeline-year">{{
                 $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFOREFF")
               }}</n-h3>
+              <br />
+
               <n-p class="timeline-desc">{{
                 $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.ONE")
               }}</n-p>
+              <br />
+
               <n-p class="timeline-desc">{{
                 $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.TWO")
               }}</n-p>
@@ -123,18 +137,26 @@
               <n-h3 class="timeline-year">{{
                 $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFIVE")
               }}</n-h3>
+              <br />
+
               <n-p class="timeline-desc">{{
                 $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.ONE")
               }}</n-p>
               <n-p class="timeline-desc">{{
                 $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.TWO")
               }}</n-p>
+              <br />
+
               <n-p class="timeline-desc">{{
                 $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.THREE")
               }}</n-p>
+              <br />
+
               <n-p class="timeline-desc">{{
                 $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FOUR")
               }}</n-p>
+              <br />
+
               <n-p class="timeline-desc">{{
                 $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FIVE")
               }}</n-p>

src/views/manage/size375/index.vue

@@ -23,10 +23,11 @@
           >
             <!-- 卡片上半部 -->
             <div class="card-profile">
+              <div style="font-size: 18px; font-weight: bold">
+                {{ leader.name }}
+              </div>
               <div class="avatar-wrapper">
-                <div class="decorative-dot"></div>
+                <!-- <div class="initials">{{ leader.name }}</div> -->
-                <div class="initials">{{ getInitials(leader.name) }}</div>
-                <div></div>
               </div>
               <div class="profile-info">
                 <h2 class="leader-name">{{ leader.name }}</h2>
@@ -73,13 +74,6 @@ const leadershipTeam = computed(() => [
     content: [t("MANAGEMENT.TWO.CONTENTONE"), t("MANAGEMENT.TWO.CONTENTTWO")],
   },
 ]);
-
-const getInitials = (name) => {
-  return name
-    .split(" ")
-    .map((n) => n[0])
-    .join("");
-};
 </script>
 
 <style scoped>
@@ -169,8 +163,8 @@ const getInitials = (name) => {
 }
 
 .initials {
-  width: 100%;
+  width: 100px;
-  /* height: 100%; */
+  height: 100%;
   background: white;
   border-radius: 50%;
   display: flex;

src/views/myHome/size1920/index.vue

@@ -163,14 +163,14 @@
               <span class="data-label">{{
                 $t("HOME.CONTAINY.STOCK_INFO.LAST_PRICE")
               }}</span>
-              <span class="data-value">${{ dataObj.Open }}</span>
+              <span class="data-value">${{ stockQuote.Open }}</span>
             </div>
             <div class="data-row">
               <span class="data-label">{{
                 $t("HOME.CONTAINY.STOCK_INFO.CHANGE")
               }}</span>
               <span class="data-value positive"
-                >{{ dataObj.change[0] }}{{ dataObj.change[1] }}</span
+                >{{ stockQuote.change[0] }}{{ stockQuote.change[1] }}</span
               >
             </div>
             <div class="data-row">
@@ -183,13 +183,13 @@
               <span class="data-label">{{
                 $t("HOME.CONTAINY.STOCK_INFO.VOLUME")
               }}</span>
-              <span class="data-value">{{ dataObj.Volume }}</span>
+              <span class="data-value">{{ stockQuote.Volume }}</span>
             </div>
             <div class="data-row">
               <span class="data-label">{{
                 $t("HOME.CONTAINY.STOCK_INFO.MARKET_CAP")
               }}</span>
-              <span class="data-value">${{ dataObj.MarketCap }}</span>
+              <span class="data-value">${{ stockQuote.MarketCap }}</span>
             </div>
           </div>
         </div>
@@ -242,20 +242,15 @@
 
 <script setup>
 import { onMounted, ref } from "vue";
-
 import { useI18n } from "vue-i18n";
-import { getTestData } from "@/config/testRequest";
 const dataObj = ref({
   change: ["0.2", "1111"],
 });
-onMounted(async () => {
+import { useStockQuote } from "@/store/stock-quote/index.js";
-  try {
+const { getStockQuate, stockQuote } = useStockQuote();
-    const data = await getTestData();
+
-    dataObj.value = data;
+getStockQuate();
-  } catch (error) {
+
-    console.error("调用接口失败:", error);
-  }
-});
 const { t: $t } = useI18n();
 </script>