添加手机端中英文切换

This commit is contained in:
范强强
2023-06-02 11:46:16 +08:00
parent a4c9487cc3
commit 03c1767e01
6 changed files with 203 additions and 94 deletions
+74 -68
View File
@@ -1,20 +1,20 @@
<template>
<div class="box">
<div class="content">
<van-tabs v-model="activeTab">
<van-tab name="regulatoryCertification" title="法规认证流程"></van-tab>
<van-tab name="parametercollection" title="认证参数收集"></van-tab>
<van-tabs v-model="activeTab" :ellipsis="false">
<van-tab name="regulatoryCertification" :title="$t('regulatoryCertificationProcess')"></van-tab>
<van-tab name="parametercollection" :title="$t('authenticationParameterCollection')"></van-tab>
</van-tabs>
</div>
<div class="content-box">
<div class="regulatory" v-if="activeTab == 'regulatoryCertification'">
<div class="content-box-text">
法规认证流程数据
{{$t('regulatoryCertificationProcessData')}}
</div>
<div class="regulatory-box">
<div class="content-box-data">
<div class="content-box-data-text">
法规清单发布dasfkj hdskjf hgkjdhfgdfkjghdfkjgdfhgkdfjghdfkjgdfhgkjdfdhfk
{{$t('regulationListIssuance')}}
</div>
<div class="content-box-data-num">
24
@@ -22,7 +22,7 @@
</div>
<div class="content-box-data">
<div class="content-box-data-text">
法规清单发布
{{$t('designTheComplianceProcess')}}
</div>
<div class="content-box-data-num">
24
@@ -30,7 +30,7 @@
</div>
<div class="content-box-data">
<div class="content-box-data-text">
法规清单发布
{{$t('verifyComplianceProcess')}}
</div>
<div class="content-box-data-num">
24
@@ -38,7 +38,7 @@
</div>
<div class="content-box-data">
<div class="content-box-data-text">
法规清单发布
{{$t('thePreHomeProcess')}}
</div>
<div class="content-box-data-num">
24
@@ -46,7 +46,7 @@
</div>
<div class="content-box-data">
<div class="content-box-data-text">
法规清单发布
{{$t('technicalAssessmentOfRegulations')}}
</div>
<div class="content-box-data-num">
24
@@ -54,7 +54,7 @@
</div>
<div class="content-box-data">
<div class="content-box-data-text">
法规清单发布
{{$t('legalOpinionCollection')}}
</div>
<div class="content-box-data-num">
24
@@ -65,61 +65,37 @@
<div class="parameter" v-else-if="activeTab == 'parametercollection'">
<div class="content-box-text">
认证参数收集数据
{{$t('authenticationParameterCollectionData')}}
</div>
<div class="parame-box">
<div class="parame-box" v-for="item in 4">
<div class="parame-box-top">
<span class="parame-box-top-text-left">相关项目:</span>
<span class="parame-box-top-text-right">Orion-G1.1-英国-00</span>
<span class="parame-box-top-text-left"
:class="{'parame-box-top-text-left-one':language == 'en-us'? true : false}">
{{$t('phoneRelatedItems')}}:</span>
<span class="parame-box-top-text-right"
:class="{'parame-box-top-text-right-one':language == 'en-us'? true : false}">
Orion-G1.1-英国-00撒旦发射点
</span>
</div>
<div class="parame-box-top">
<span class="parame-box-top-text-left">清单标题:</span>
<span class="parame-box-top-text-right">认证参数收集模板</span>
<span class="parame-box-top-text-left"
:class="{'parame-box-top-text-left-one':language == 'en-us'? true : false}">
{{$t('listHeading')}}:
</span>
<span class="parame-box-top-text-right"
:class="{'parame-box-top-text-right-one':language == 'en-us'? true : false}">
认证参数收集模板
</span>
</div>
<div class="parame-box-top">
<span class="parame-box-top-text-left">版本号:</span>
<span class="parame-box-top-text-right">03</span>
</div>
<div class="parame-box-bottom">
<div class="parame-box-bottom-box">
<div class="parame-box-bottom-box-text-top">
待填写
</div>
<div class="parame-box-bottom-box-text-num">
15
</div>
</div>
<div class="parame-box-bottom-box">
<div class="parame-box-bottom-box-text-top">
待分配填写人
</div>
<div class="parame-box-bottom-box-text-num">
15
</div>
</div>
<div class="parame-box-bottom-box">
<div class="parame-box-bottom-box-text-top">
参数待发起
</div>
<div class="parame-box-bottom-box-text-num">
15
</div>
</div>
</div>
</div>
<div class="parame-box">
<div class="parame-box-top">
<span class="parame-box-top-text-left">相关项目:</span>
<span class="parame-box-top-text-right">Orion-G1.1-英国-00</span>
</div>
<div class="parame-box-top">
<span class="parame-box-top-text-left">清单标题:</span>
<span class="parame-box-top-text-right">认证参数收集模板</span>
</div>
<div class="parame-box-top">
<span class="parame-box-top-text-left">版本号:</span>
<span class="parame-box-top-text-right">03</span>
<span class="parame-box-top-text-left"
:class="{'parame-box-top-text-left-one':language == 'en-us'? true : false}">
{{$t('phoneVersionNumber')}}:
</span>
<span class="parame-box-top-text-right"
:class="{'parame-box-top-text-right-one':language == 'en-us'? true : false}">
03
</span>
</div>
<div class="parame-box-bottom">
<div class="parame-box-bottom-box">
@@ -152,10 +128,10 @@
</div>
<van-tabbar v-model="active" @change="onChange">
<van-tabbar-item name="search" icon="search">搜索</van-tabbar-item>
<van-tabbar-item name="toDoCenter" icon="bell">待办中心</van-tabbar-item>
<van-tabbar-item name="taskData" icon="underway">任务统计</van-tabbar-item>
<van-tabbar-item name="home" icon="manager">我的</van-tabbar-item>
<van-tabbar-item name="search" icon="search">{{$t('phoneSearch')}}</van-tabbar-item>
<van-tabbar-item name="toDoCenter" icon="bell">{{$t('todocenter')}}</van-tabbar-item>
<van-tabbar-item name="taskData" icon="underway">{{$t('taskStatistics')}}</van-tabbar-item>
<van-tabbar-item name="home" icon="manager">{{$t('mine')}}</van-tabbar-item>
</van-tabbar>
</div>
</template>
@@ -166,7 +142,8 @@
data() {
return {
active: 'taskData',
activeTab: 'regulatoryCertification'
activeTab: 'regulatoryCertification',
language: localStorage.getItem('language')
}
},
methods: {
@@ -194,9 +171,19 @@
color: #00B3BE;
}
.box {
padding-top: 1.32rem;
overflow: hidden;
}
.content {
padding-top: 0.18rem;
position: relative;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background: #fff;
padding-top: 0.16rem;
}
::v-deep .van-tabs__line {
@@ -209,7 +196,7 @@
font-weight: 400;
color: #868A9A;
flex: none;
margin-right: 0.2rem;
margin-right: 0.6rem;
}
::v-deep .van-tab--active {
@@ -247,6 +234,7 @@
width: 100%;
padding: 0.4rem;
background: #F7F7F8;
margin-bottom: 1.3rem;
}
.content-box-text {
@@ -296,9 +284,11 @@
border-radius: 0.2rem;
margin-bottom: 0.3rem;
}
.parame-box:last-child{
.parame-box:last-child {
margin-bottom: 0;
}
.parame-box-top {
display: flex;
margin-bottom: 0.12rem;
@@ -315,6 +305,10 @@
word-break: break-all;
}
.parame-box-top-text-left-one {
flex: 1.4;
}
.parame-box-top-text-right {
font-size: 0.36rem;
font-family: PingFang SC-Regular, PingFang SC;
@@ -324,6 +318,10 @@
word-break: break-all;
}
.parame-box-top-text-right-one {
flex: 2;
}
.parame-box-bottom {
display: flex;
justify-content: space-between;
@@ -355,4 +353,12 @@
color: #01A0AC;
margin-top: 0.12rem;
}
::v-deep .van-tabs__nav--line.van-tabs__nav--complete {
padding-left: 0;
}
::v-deep .van-tabs__wrap--scrollable .van-tab {
padding: 0 0.1rem;
}
</style>