code init
This commit is contained in:
chenxiaoxi
@@ -0,0 +1,380 @@
|
||||
<template>
|
||||
<div id="itemsDetails">
|
||||
<!-- 国内标准-->
|
||||
<div>
|
||||
<div class="otherStandardDetails-header">
|
||||
<div class="standard-details-header-title">
|
||||
国内标准
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="laws-details-content">
|
||||
<div class="content-box">
|
||||
<div class="content-row">
|
||||
<div class="content-col">
|
||||
<div class="content-label border-right-hide border-bottom-hide">条款号:</div>
|
||||
<div class="content-info border-right-hide border-bottom-hide">
|
||||
123
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-col">
|
||||
<div class="content-label border-right-hide border-bottom-hide">条款名称:</div>
|
||||
<div class="content-info border-right-hide border-bottom-hide">
|
||||
123
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-col">
|
||||
<div class="content-label border-bottom-hide">在产车实施日期:</div>
|
||||
<div class="content-info border-bottom-hide">
|
||||
123
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-row">
|
||||
<div class="content-col">
|
||||
<div class="content-label border-right-hide border-bottom-hide">关联零部件:</div>
|
||||
<div class="content-info border-right-hide border-bottom-hide">
|
||||
123
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-col">
|
||||
<div class="content-label border-right-hide border-bottom-hide">新车型实施日期:</div>
|
||||
<div class="content-info border-right-hide border-bottom-hide">
|
||||
123
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-col">
|
||||
<div class="content-label border-bottom-hide">适用车型:</div>
|
||||
<div class="content-info border-bottom-hide">
|
||||
123
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-row">
|
||||
<div class="content-col flex-row">
|
||||
<div class="content-label border-right-hide">备注:</div>
|
||||
<div class="content-info">123</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-divider content-position="left">引用标准</el-divider>
|
||||
<div class="laws-details-content">
|
||||
<div class="content-box">
|
||||
<div class="content-row" v-for="(item, index) in standardList" :key="index">
|
||||
<div class="content-col flex-row">
|
||||
<div class="content-label border-right-hide" :class="index === standardList.length - 1 ? '' : 'border-bottom-hide'">{{ index + 1 }}</div>
|
||||
<div class="content-info" :class="index === standardList.length - 1 ? '' : 'border-bottom-hide'">{{ item.title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-divider content-position="left">关联文件</el-divider>
|
||||
<div class="laws-details-content">
|
||||
<div class="content-box">
|
||||
<div class="content-row" v-for="(item, index) in standardList" :key="index">
|
||||
<div class="content-col flex-row">
|
||||
<div class="content-label border-right-hide" :class="index === standardList.length - 1 ? '' : 'border-bottom-hide'">{{ index + 1 }}</div>
|
||||
<div class="content-info" :class="index === standardList.length - 1 ? '' : 'border-bottom-hide'">
|
||||
{{ item.title }}
|
||||
<el-button type="primary" style="margin-left: 0.2rem" size="small" class="download-btn">下载</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-divider content-position="left">特殊参数需求</el-divider>
|
||||
<div class="laws-details-content">
|
||||
<div class="content-box">
|
||||
<div class="content-row" v-for="(item, index) in standardList" :key="index">
|
||||
<div class="content-col flex-row">
|
||||
<div class="content-label border-right-hide" :class="index === standardList.length - 1 ? '' : 'border-bottom-hide'">{{ index + 1 }}</div>
|
||||
<div class="content-info" :class="index === standardList.length - 1 ? '' : 'border-bottom-hide'">{{ item.title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-divider content-position="left">条款内容</el-divider>
|
||||
<div class="clauseText"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'itemsDetails',
|
||||
data () {
|
||||
return {
|
||||
standardList: [
|
||||
{title: '1'},
|
||||
{title: '2'},
|
||||
{title: '3'}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
components: {},
|
||||
props: {},
|
||||
computed: {},
|
||||
watch: {},
|
||||
mounted () {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '~@/assets/styles/style';
|
||||
@import '~@/assets/styles/mixins';
|
||||
#itemsDetails{
|
||||
height: 100%;
|
||||
padding: 15px;
|
||||
overflow-y: auto;
|
||||
.clauseText {
|
||||
min-height: 100px;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
margin: 10px;
|
||||
border: 0.5px solid #dedede;
|
||||
}
|
||||
.otherStandardDetails-header {
|
||||
.flex();
|
||||
align-items: center;
|
||||
.title {
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
flex: 1;
|
||||
.ellipsis();
|
||||
padding-right: 15px;
|
||||
}
|
||||
.standard-details-header-title{
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
flex: 1;
|
||||
padding: 0 20px;
|
||||
.ellipsis();
|
||||
}
|
||||
@media screen and (min-width: 1920px) {
|
||||
.title{
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.otherStandardDetails-button-group{
|
||||
flex: 1;
|
||||
.flex();
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
.laws-details-content {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.laws-details-content span {
|
||||
padding: 10px;
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
.download-btn span{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
font-size: 6px;
|
||||
}
|
||||
}
|
||||
.fileContent{
|
||||
margin-bottom: 20px;
|
||||
font-size: 0.3rem;
|
||||
}
|
||||
.fileBlock{
|
||||
display: inline-block;
|
||||
padding: 0 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.fileBlock .ivu-icon {
|
||||
margin-left: 10px;
|
||||
font-size: 25px;
|
||||
}
|
||||
.flex-row-2{
|
||||
flex: 1 !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
.no-margin{
|
||||
margin: 0 !important;
|
||||
}
|
||||
.content-label-2line{
|
||||
line-height: normal;
|
||||
}
|
||||
.border-right-hide{
|
||||
border-right: 1px solid transparent !important;
|
||||
}
|
||||
.border-bottom-hide{
|
||||
border-bottom: 1px solid transparent !important;
|
||||
}
|
||||
.el-divider--horizontal {
|
||||
display: block;
|
||||
height: 3px;
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
background-color: #3391CE;
|
||||
}
|
||||
.bg(){
|
||||
background: rgba(255,255,255,.25);
|
||||
}
|
||||
.content-box{
|
||||
.flex();
|
||||
flex-direction: column;
|
||||
.bg();
|
||||
padding: 10px;
|
||||
.content-box-header{
|
||||
color: #FFF;
|
||||
.flex();
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #FFF;
|
||||
height: 4.94vh;
|
||||
padding-left: 5px;
|
||||
.title{
|
||||
font-size: 16px;
|
||||
}
|
||||
.more{
|
||||
padding: 2px 10px;
|
||||
transition: border-radius .2s linear;
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
background: rgba(255,255,255,.25);
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-box-detail{
|
||||
padding: 10px 0 5px 0;
|
||||
overflow: hidden;
|
||||
height: calc(~'100% - 4.94vh');
|
||||
ul{
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
li{
|
||||
color: #FFF;
|
||||
line-height: 30px;
|
||||
padding: 0 5px;
|
||||
.ellipsis();
|
||||
font-size: 14px;
|
||||
&.is-new{
|
||||
font-style: italic;
|
||||
color: #FF7B7B;
|
||||
a{
|
||||
color: #FF7B7B;
|
||||
}
|
||||
i{
|
||||
transform: rotate(-90deg);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
a{
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-row{
|
||||
.flex();
|
||||
//margin-bottom: 20px;
|
||||
line-height: 48px;
|
||||
min-height: 48px;
|
||||
overflow: hidden;
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.content-col{
|
||||
flex: 0 0 33.33333333%;
|
||||
.flex();
|
||||
.content-label{
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
width: 148px;
|
||||
text-align: center;
|
||||
background: #F2F5F9;
|
||||
.flex();
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0.5px solid #dedede;
|
||||
min-height: 48px;
|
||||
}
|
||||
@media screen and (min-width: 1920px) {
|
||||
.content-label{
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.content-info{
|
||||
line-height: normal;
|
||||
flex: 1;
|
||||
padding: 5px 15px;
|
||||
//line-height: 22px;
|
||||
font-size: 13px;
|
||||
//text-align: center;
|
||||
.flex();
|
||||
align-items: center;
|
||||
justify-content: left;
|
||||
border: 0.5px solid #dedede;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
.res-type-content{
|
||||
ul{
|
||||
display: inline-flex;
|
||||
li{
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
span{
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
.ivu-btn{
|
||||
span{
|
||||
margin: 0;
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.otherStandardDetails-drawer{
|
||||
.ivu-drawer-body{
|
||||
height: calc(~'100% - 51px') !important;
|
||||
}
|
||||
}
|
||||
.el-input__inner {
|
||||
width: 50% !important;
|
||||
}
|
||||
.otherStandardDetails-drawer-content{
|
||||
flex: auto;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
height: calc(100% - 11px);
|
||||
}
|
||||
.el-input__inner{
|
||||
height: 32px !important;
|
||||
}
|
||||
.el-drawer-form{
|
||||
padding-left: 20px;
|
||||
overflow-y: auto;
|
||||
height: 570px;
|
||||
}
|
||||
.el-popover el-popper user-dept-popper{
|
||||
min-height: 200px;
|
||||
}
|
||||
.el-input__inner{
|
||||
height: 32px;
|
||||
}
|
||||
.search-box{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
.serch-form-item .el-form-item__content .el-input__inner{
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user