优化移动端样式
This commit is contained in:
parent
a970c7f789
commit
4ccb9c256b
@ -3,7 +3,7 @@
|
||||
<!-- 标题区 -->
|
||||
<section class="hero-section">
|
||||
<div class="container">
|
||||
<h1>Committee Appointments</h1>
|
||||
<h1>Committee Composition</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
@ -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">{{
|
||||
getCommitteeShortName(committee)
|
||||
}}</span>
|
||||
<span class="committee-name"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
@ -84,19 +82,19 @@ const committeeRoles = {
|
||||
"Cao Yu": {},
|
||||
"David Lazar": {},
|
||||
"Hu Bin": {
|
||||
Compensation: "Chair",
|
||||
Governance: "Member",
|
||||
Audit: "Member",
|
||||
Compensation: "Audit Committee ",
|
||||
Governance: "Compensation Committee",
|
||||
Audit: "Nominating Committee",
|
||||
},
|
||||
"David Natan": {
|
||||
Compensation: "Member",
|
||||
Governance: "Chair",
|
||||
Audit: "Chair",
|
||||
Compensation: "Audit Committee ",
|
||||
Governance: "Compensation Committee",
|
||||
Audit: "Nominating Committee",
|
||||
},
|
||||
"Chan Oi Fat": {
|
||||
Compensation: "Member",
|
||||
Governance: "Member",
|
||||
Audit: "Member",
|
||||
Compensation: "Audit Committee ",
|
||||
Governance: "Compensation Committee",
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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">{{ getInitials(leader.name) }}</div>
|
||||
<div></div>
|
||||
<!-- <div class="initials">{{ leader.name }}</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%;
|
||||
/* height: 100%; */
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
|
||||
@ -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 () => {
|
||||
try {
|
||||
const data = await getTestData();
|
||||
dataObj.value = data;
|
||||
} catch (error) {
|
||||
console.error("调用接口失败:", error);
|
||||
}
|
||||
});
|
||||
import { useStockQuote } from "@/store/stock-quote/index.js";
|
||||
const { getStockQuate, stockQuote } = useStockQuote();
|
||||
|
||||
getStockQuate();
|
||||
|
||||
const { t: $t } = useI18n();
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user