WL/laws_weilai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

布局知识库

Browse Source
This commit is contained in:
qq787203167
2022-08-03 18:12:32 +08:00
parent cbb193e362
commit bb25d4775f
5 changed files with 350 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardView.vue
+183 -8
View File
@@ -6,21 +6,95 @@
<span style="line-height: 66px;display: inline-block;float: left">
<a-icon type="arrow-left" style="margin-right: 6px;"/>
</span>
{{$t('applicableInstructionsMarketList')}}
{{$t('See')}}
</div>
</div>
<div style="padding-top: 68px;background: #fff">
<div class="detail-content" style="padding: 24px">
<div class="detail-content" style="padding: 24px;white-space: nowrap">
<div class="box-content-right">
<div @click="displayInformationClick" class="operator-text">
<a-icon type="eye"/>
{{$t('displayInformation')}}
</div>
<div @click="newlyAddedClick" class="operator-text">
<a-icon type="plus"/>
{{$t('addComparison')}}
</div>
</div>
<div class="content-box">
<div class="content-box-left">
<div class="content-box-left-text">
hadhasdasdhadashdjk
</div>
<div class="content-box-left-text">
hadhasdasdhadashdjk
</div>
<div class="content-box-left-text">
hadhasdasdhadashdjk
</div>
<div class="content-box-left-text">
hadhasdasdhadashdjk
</div>
<div class="content-box-left-text">
hadhasdasdhadashdjk
</div>
<div class="content-box-left-text">
hadhasdasdhadashdjk
</div>
<div class="content-box-left-text">
hadhasdasdhadashdjk
</div>
<div class="content-box-left-text">
hadhasdasdhadashdjk
</div>
<div class="content-box-left-text">
hadhasdasdhadashdjk
</div>
</div>
<div class="content-box-right" v-for="item1 in 9">
<div class="content-box-box-top">
<img src="../../../../assets/mobileHome.png" class="content-box-box-img" alt="">
<span class="content-box-box-text">
中国
</span>
</div>
<div class="content-box-box" v-for="item in 9">
<img src="../../../../assets/mobileHome.png" class="content-box-box-img" alt="">
<span class="content-box-box-text">
中国
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<displayInformationModel ref="displayInformationModelRef"/>
</div>
</template>
<script>
import { getAction, postAction, downloadFile } from '@/api/manage'
import displayInformationModel from './displayInformationModel'
export default {
name: 'countryCardView'
name: 'countryCardView',
components: {
displayInformationModel
},
data() {
return {}
},
mounted() {
},
methods: {
displayInformationClick() {
this.$refs.displayInformationModelRef.getData()
},
newlyAddedClick() {
}
}
}
</script>
@@ -66,11 +140,6 @@
}
}
.content-box {
padding: 0 32px;
box-sizing: border-box;
}
.header-text {
font-size: 16px;
font-weight: 400;
@@ -85,4 +154,110 @@
}
}
}
.box-content-right {
width: 100%;
text-align: right;
margin-bottom: 20px;
}
.operator-text {
cursor: pointer;
margin-right: 53px;
font-size: 14px;
font-weight: 400;
color: #040B29;
display: inline-block;
}
.operator-text:last-child {
margin-right: 13px;
}
.content-box {
overflow: auto;
white-space: nowrap;
position: relative;
}
.content-box-left {
width: 200px;
background: #fff;
z-index: 111;
display: inline-block;
position: sticky;
left: 0;
border-top: 1px #d9d9d9 solid;
border-left: 1px #d9d9d9 solid;
border-bottom: 1px #d9d9d9 solid;
border-right: 1px #d9d9d9 solid;
}
.content-box-left-text {
font-size: 16px;
color: #040B29;
font-weight: 400;
text-align: center;
border-bottom: 1px #d9d9d9 solid;
height: 80px;
line-height: 80px;
}
.content-box-left-text:last-child {
border-bottom: none;
}
.content-box-box-top {
width: 340px;
height: 160px;
display: inline-block;
cursor: pointer;
border-left: 1px #d9d9d9 solid;
border-top: 1px #d9d9d9 solid;
border-right: 1px #d9d9d9 solid;
border-bottom: 1px #d9d9d9 solid;
position: sticky;
top: 0;
z-index: 111;
background: #fff;
}
.content-box-right {
width: 339px;
position: relative;
display: inline-block;
border-top: 1px #d9d9d9 solid;
border-right: 1px #d9d9d9 solid;
border-bottom: 1px #d9d9d9 solid;
}
.content-box-right:last-child {
border-right: 1px #d9d9d9 solid;
}
.content-box-box-img {
width: 70%;
height: 100%;
}
.content-box-box-text {
display: inline-block;
width: 30%;
text-align: center;
font-size: 18px;
font-weight: 500;
color: #040B29;
}
.content-box-box {
width: 100%;
height: 80px;
border-bottom: 1px #d9d9d9 solid;
cursor: pointer;
}
.content-box-box:last-child {
border-bottom: none;
}
</style>