807 lines
28 KiB
Vue
807 lines
28 KiB
Vue
<template>
|
|
<div class="wrapper">
|
|
<el-form :model="dataView">
|
|
<div v-for="(item, index) in dataView.children" :key="item">
|
|
|
|
<div v-for="itemson in item.children" :key="itemson.name">
|
|
<div class="dataTitleSon">
|
|
{{ itemson.name }}
|
|
</div>
|
|
<div class="info-content" v-if="itemson.name ==='基本信息'">
|
|
<div class="info-left">
|
|
|
|
<template v-for="itemsonson in itemson.children">
|
|
<div class="left-inner" v-if="itemsonson.type !== 'video' && itemsonson.type !== 'image'">
|
|
<span style="font-size:14px;color:#212121;">{{itemsonson.name}}</span>:
|
|
<el-tooltip placement="top" v-if="(itemsonson.note1 && itemsonson.note1.length>18)">
|
|
<div slot="content">{{itemsonson.note1}}</div>
|
|
<span style="font-size:14px;color:#212121;font-weight: bold;">{{itemsonson.note1}}</span>
|
|
</el-tooltip>
|
|
<span style="font-size:14px;color:#212121;font-weight: bold;" v-else>{{ itemsonson.note1 }}</span>
|
|
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<div class="info-right">
|
|
<div id="lib_Tab1_sx" class="lib_tabborder_sx">
|
|
<div class="lib_Menubox_sx ">
|
|
<ul>
|
|
<li id="one1" @click="setTab('one',1,5)" class="hover">图片</li>
|
|
<li id="one2" @click="setTab('one',2,5)">视频</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="lib_Contentbox_sx ">
|
|
<div id="con_one_1">
|
|
<template v-for="itemsonson1 in itemson.children">
|
|
<div v-if="(itemsonson1.type === 'image' )">
|
|
<img v-if=" itemsonson1.note1" @click="videoAndImg(itemsonson1.note1)" :src="itemsonson1.note1"
|
|
style="height:270px;width:490px;" />
|
|
<div v-else style="height: 270px;line-height: 270px;text-align: center;color:grey">暂无图片</div>
|
|
</div>
|
|
|
|
</template>
|
|
</div>
|
|
<div id="con_one_2" style="display:none">
|
|
<template v-for="itemsonson1 in itemson.children">
|
|
<div v-if="(itemsonson1.type === 'video' )">
|
|
<video v-if=" itemsonson1.note1" @click="videoAndImg(itemsonson1.note1)" :src="itemsonson1.note1"
|
|
style="height:270px;width:490px;" />
|
|
<div v-else style="height: 270px;line-height: 270px;text-align: center;;color:grey">暂无视频</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="itemson.name === '功能介绍'" style="margin-bottom: 20px">
|
|
<div v-for="itemDataForm in dataForm.infoList" :key="itemDataForm.attrType">
|
|
<div v-if="itemDataForm.attrType === '功能介绍'" class="textAndImg">
|
|
<div v-for="itemDataFormValue in itemDataForm.attrValue" :key="itemDataFormValue.name + 'value'"
|
|
class="textAndImgSon1" >
|
|
<div class="Son1-left">
|
|
|
|
<img v-if="itemDataFormValue.img" @click="videoAndImg(itemDataFormValue.img)" :src="itemDataFormValue.img"
|
|
style="height:270px;width:490px;" />
|
|
<div v-else style="height: 270px;line-height: 270px;text-align: center;">暂无图片</div>
|
|
|
|
|
|
</div>
|
|
<div class="textAndImgSon">
|
|
<div >{{ itemDataFormValue.name }}</div>
|
|
<el-tooltip placement="top" v-if="(itemDataFormValue.desc && itemDataFormValue.desc.length>50)">
|
|
<div slot="content">{{ itemDataFormValue.desc }}</div>
|
|
<div>功能介绍：{{ itemDataFormValue.desc }}</div>
|
|
</el-tooltip>
|
|
<div v-else>功能介绍：{{ itemDataFormValue.desc }}</div>
|
|
</div>
|
|
<!-- <div @click="videoAndImg(itemDataFormValue.img)">浏览</div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="itemson.name === '应用场景'" style="margin-bottom: 20px">
|
|
<div v-for="itemDataForm in dataForm.infoList" :key="itemDataForm.attrType">
|
|
<div v-if="itemDataForm.attrType === '应用场景'" class="textAndImg">
|
|
<div v-for="itemDataFormValue in itemDataForm.attrValue" :key="itemDataFormValue.name + 'value'"
|
|
class="textAndImgSon1" >
|
|
<div class="Son1-left">
|
|
|
|
<img v-if="itemDataFormValue.img" @click="videoAndImg(itemDataFormValue.img)" :src="itemDataFormValue.img"
|
|
style="height:270px;width:490px;" />
|
|
<div v-else style="height: 270px;line-height: 270px;text-align: center;">暂无图片</div>
|
|
|
|
|
|
</div>
|
|
<div class="textAndImgSon" >
|
|
<div>{{ itemDataFormValue.name }}</div>
|
|
<el-tooltip placement="top" v-if="(itemDataFormValue.desc && itemDataFormValue.desc.length>50)">
|
|
<div slot="content">{{ itemDataFormValue.desc }}</div>
|
|
<div>应用描述：{{ itemDataFormValue.desc }}</div>
|
|
</el-tooltip>
|
|
<div v-else>应用描述：{{ itemDataFormValue.desc }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="itemson.name === '算法优势'" style="margin-top: 20px">
|
|
<div v-for="itemDataForm in dataForm.infoList" :key="itemDataForm.attrType">
|
|
<div v-if="itemDataForm.attrType === '算法优势'" class="textAndImg">
|
|
<div v-for="itemDataFormValue in itemDataForm.attrValue" :key="itemDataFormValue.name + 'value'"
|
|
class="textAndImgSon" >
|
|
<div>{{ itemDataFormValue.name }}</div>
|
|
<el-tooltip placement="top" v-if="(itemDataFormValue.desc && itemDataFormValue.desc.length>100)">
|
|
<div slot="content">{{ itemDataFormValue.desc }}</div>
|
|
<div>算法描述：{{ itemDataFormValue.desc }}</div>
|
|
</el-tooltip>
|
|
<div v-else>算法描述：{{ itemDataFormValue.desc }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="other-content" v-else>
|
|
<div class="other-info">
|
|
<template v-for="itemsonson in itemson.children">
|
|
<div v-if="itemsonson.type === ' multipleAdditions'" class="textAndImg">
|
|
<div v-for="multipleAdditionsItem in itemsonson.note1" :key="multipleAdditionsItem"
|
|
class="textAndImgSon" >
|
|
<el-tooltip placement="top">
|
|
<div slot="content">
|
|
{{
|
|
multipleAdditionsItem.question ||
|
|
multipleAdditionsItem.type ||
|
|
multipleAdditionsItem.name
|
|
}}
|
|
</div>
|
|
<div>
|
|
{{
|
|
multipleAdditionsItem.question ||
|
|
multipleAdditionsItem.type ||
|
|
multipleAdditionsItem.name
|
|
}}
|
|
</div>
|
|
</el-tooltip>
|
|
<el-tooltip placement="top">
|
|
<div slot="content">
|
|
{{
|
|
multipleAdditionsItem.answer ||
|
|
multipleAdditionsItem.price ||
|
|
multipleAdditionsItem.img
|
|
}}
|
|
</div>
|
|
<div>
|
|
{{
|
|
multipleAdditionsItem.answer ||
|
|
multipleAdditionsItem.price ||
|
|
multipleAdditionsItem.img
|
|
}}
|
|
</div>
|
|
</el-tooltip>
|
|
<el-tooltip placement="top">
|
|
<div slot="content">{{ multipleAdditionsItem.desc }}</div>
|
|
<div>{{ multipleAdditionsItem.desc }}</div>
|
|
</el-tooltip>
|
|
<!-- <div>{{ multipleAdditionsItem }}</div> -->
|
|
</div>
|
|
</div>
|
|
<div class="info-inner" v-else-if="
|
|
(
|
|
itemsonson.name === '上传附件'||
|
|
itemsonson.name === '技术文档' )
|
|
">
|
|
<span style="font-size:14px;color:#212121;" >{{itemsonson.name}}</span>:
|
|
<span style="color: #0058e1;font-weight: bold;text-decoration: underline;cursor: pointer;"
|
|
v-if="itemsonson.note1" @click="videoAndImg(itemsonson.note1)">点击下载</span>
|
|
<span v-else style="color: grey;">暂未上传</span>
|
|
|
|
</div>
|
|
<div class="info-inner" v-else-if="
|
|
(itemsonson.name === '平台地址' && showDocking) ||
|
|
(itemsonson.name === 'SDK安装包' && showSDK) ||
|
|
(itemsonson.name === '接口请求方式' && showInterface) ||
|
|
(itemsonson.name === '服务接口' && showInterface)
|
|
">
|
|
<span style="font-size:14px;color:#212121;">{{itemsonson.name}}</span>:
|
|
<el-tooltip placement="top" v-if="(itemsonson.note1 && itemsonson.note1.length>10)">
|
|
<div slot="content">{{itemsonson.note1}}</div>
|
|
<span style="font-size:14px;color:#212121;font-weight: bold;">{{itemsonson.note1}}</span>
|
|
</el-tooltip>
|
|
<span style="font-size:14px;color:#212121;font-weight: bold;" v-else>{{ itemsonson.note1 }}</span>
|
|
</div>
|
|
<div class="info-inner" v-else-if="
|
|
!(
|
|
itemsonson.name === '平台地址' ||
|
|
itemsonson.name === 'SDK安装包' ||
|
|
itemsonson.name === '接口请求方式' ||
|
|
itemsonson.name === '服务接口'
|
|
)
|
|
">
|
|
<span style="font-size:14px;color:#212121;">{{itemsonson.name}}</span>:
|
|
<el-tooltip placement="top" v-if="(itemsonson.note1 && itemsonson.note1.length>10)">
|
|
<div slot="content">{{itemsonson.note1}}</div>
|
|
<span style="font-size:14px;color:#212121;font-weight: bold;">{{itemsonson.note1}}</span>
|
|
</el-tooltip>
|
|
<span style="font-size:14px;color:#212121;font-weight: bold;" v-else>{{ itemsonson.note1 }}</span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import qs from 'qs'
|
|
import Template from '../../devtools/template.vue'
|
|
|
|
export default {
|
|
components: {Template},
|
|
props: {
|
|
dataForm: {
|
|
type: Object
|
|
},
|
|
insertList: {
|
|
type: Array
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
dataList: [],
|
|
dataView: [],
|
|
// 归属部门
|
|
unit: '',
|
|
// 平台对接
|
|
showDocking: false,
|
|
// SDK
|
|
showSDK: false,
|
|
// 调用接口
|
|
showInterface: false
|
|
}
|
|
},
|
|
watch: {
|
|
dataList (item) {
|
|
if (item) {
|
|
|
|
this.dataList = item
|
|
}
|
|
},
|
|
insertList (val) {
|
|
if (val) {
|
|
if (this.dataForm.type === '应用资源') {
|
|
this.dataView = val.filter(
|
|
(item) => item.name === this.dataForm.type
|
|
)[0]
|
|
this.dataForm.infoList.map((item, index) => {
|
|
this.dataView.children.map((itemView, indexView) => {
|
|
|
|
itemView.children.map((itemViewSon, indexViewSon) => {
|
|
|
|
itemViewSon.children.map((itemSon, indexSon) => {
|
|
|
|
if (itemSon.name.indexOf('描述') != -1) {
|
|
this.dataView.children[indexView].children[
|
|
indexViewSon
|
|
].children[indexSon].note1 = this.dataForm.description
|
|
} else if (itemSon.name.indexOf('名称') != -1) {
|
|
this.dataView.children[indexView].children[
|
|
indexViewSon
|
|
].children[indexSon].note1 = this.dataForm.name
|
|
} else if (itemSon.name.indexOf('能力类型') != -1) {
|
|
this.dataView.children[indexView].children[
|
|
indexViewSon
|
|
].children[indexSon].note1 = this.dataForm.type
|
|
} else if (itemSon.name.indexOf('共享条件') != -1) {
|
|
this.dataView.children[indexView].children[
|
|
indexViewSon
|
|
].children[indexSon].note1 = this.dataForm.shareCondition
|
|
} else if (itemSon.name === '部门联系人') {
|
|
|
|
this.dataView.children[indexView].children[
|
|
indexViewSon
|
|
].children[indexSon].note1 = this.dataForm.deptContacts
|
|
} else if (itemSon.name.indexOf('属部门') != -1) {
|
|
this.dataView.children[indexView].children[
|
|
indexViewSon
|
|
].children[indexSon].note1 = this.unit
|
|
} else if (itemSon.name === '部门联系人电话') {
|
|
this.dataView.children[indexView].children[
|
|
indexViewSon
|
|
].children[indexSon].note1 = this.dataForm.deptPhone
|
|
} else if (
|
|
itemSon.name === '关联组件信息' &&
|
|
item.attrType === '关联组件信息'
|
|
) {
|
|
this.queryPartAppByKeyIdFunction(
|
|
indexView,
|
|
indexViewSon,
|
|
indexSon
|
|
)
|
|
} else if (itemSon.name === item.attrType) {
|
|
if (itemSon.type !== ' multipleAdditions') {
|
|
this.dataView.children[indexView].children[
|
|
indexViewSon
|
|
].children[indexSon].note1 = item.attrValue
|
|
} else {
|
|
this.dataView.children[indexView].children[
|
|
indexViewSon
|
|
].children[indexSon].note1 = JSON.parse(item.attrValue)
|
|
}
|
|
}
|
|
})
|
|
})
|
|
})
|
|
|
|
if (item.attrType === '功能介绍') {
|
|
this.dataForm.infoList[index].attrValue = JSON.parse(
|
|
item.attrValue
|
|
)
|
|
}
|
|
})
|
|
} else {
|
|
const componentType = this.dataForm.infoList.filter(
|
|
(item) => item.attrType === '组件类型'
|
|
)
|
|
this.dataView = val.filter(
|
|
(item) => item.name === this.dataForm.type
|
|
)[0]
|
|
this.dataView = this.dataView.children.filter(
|
|
(item) => item.name === componentType[0].attrValue
|
|
)[0]
|
|
this.dataForm.infoList.map((item, index) => {
|
|
this.dataView.children.map((itemView, indexView) => {
|
|
|
|
itemView.children.map((itemViewSon, indexViewSon) => {
|
|
|
|
itemViewSon.children.map((itemSon, indexSon) => {
|
|
|
|
if (itemSon.name.indexOf('描述') != -1) {
|
|
this.dataView.children[indexView].children[
|
|
indexViewSon
|
|
].children[indexSon].note1 = this.dataForm.description
|
|
} else if (itemSon.name.indexOf('名称') != -1) {
|
|
this.dataView.children[indexView].children[
|
|
indexViewSon
|
|
].children[indexSon].note1 = this.dataForm.name
|
|
} else if (itemSon.name.indexOf('共享条件') != -1) {
|
|
this.dataView.children[indexView].children[
|
|
indexViewSon
|
|
].children[indexSon].note1 = this.dataForm.shareCondition
|
|
} else if (itemSon.name.indexOf('共享方式') != -1) {
|
|
this.dataView.children[indexView].children[
|
|
indexViewSon
|
|
].children[indexSon].note1 = this.dataForm.shareMode
|
|
} else if (itemSon.name.indexOf('共享类型') != -1) {
|
|
this.dataView.children[indexView].children[
|
|
indexViewSon
|
|
].children[indexSon].note1 = this.dataForm.shareType
|
|
} else if (itemSon.name === '部门联系人') {
|
|
|
|
this.dataView.children[indexView].children[
|
|
indexViewSon
|
|
].children[indexSon].note1 = this.dataForm.deptContacts
|
|
} else if (itemSon.name.indexOf('属部门') != -1) {
|
|
this.dataView.children[indexView].children[
|
|
indexViewSon
|
|
].children[indexSon].note1 = this.unit
|
|
} else if (itemSon.name === '部门联系人电话') {
|
|
this.dataView.children[indexView].children[
|
|
indexViewSon
|
|
].children[indexSon].note1 = this.dataForm.deptPhone
|
|
} else if (itemSon.name.indexOf('接口请求方式') != -1) {
|
|
this.dataView.children[indexView].children[
|
|
indexViewSon
|
|
].children[indexSon].note1 = this.dataForm.apiMethodType
|
|
} else if (
|
|
itemSon.name === '来源应用' &&
|
|
item.attrType === '来源应用'
|
|
) {
|
|
this.queryPartAppByKeyIdFunction(
|
|
indexView,
|
|
indexViewSon,
|
|
indexSon
|
|
)
|
|
} else if (itemSon.name === item.attrType) {
|
|
if (itemSon.type !== ' multipleAdditions') {
|
|
this.dataView.children[indexView].children[
|
|
indexViewSon
|
|
].children[indexSon].note1 = item.attrValue
|
|
} else if (itemSon.type === ' multipleAdditions') {
|
|
this.dataView.children[indexView].children[
|
|
indexViewSon
|
|
].children[indexSon].note1 = JSON.parse(item.attrValue)
|
|
}
|
|
}
|
|
})
|
|
})
|
|
})
|
|
if (
|
|
item.attrType === '算法优势' ||
|
|
item.attrType === '应用场景' ||
|
|
item.attrType === '功能介绍'
|
|
) {
|
|
this.dataForm.infoList[index].attrValue = JSON.parse(
|
|
item.attrValue
|
|
)
|
|
}
|
|
})
|
|
console.log(
|
|
'valvalvalvalvalvalvalvalvalvalval============',
|
|
|
|
this.dataView
|
|
)
|
|
// 智能算法-使用方式-3种方式联动
|
|
this.dataView.children.map((val) => {
|
|
if (val.name === '部署与使用') {
|
|
|
|
val.children.map((val) => {
|
|
if (val.name === '使用方式') {
|
|
val.children.map((val) => {
|
|
if (val.name === '使用方式') {
|
|
if (val.note1 === 'SDK') {
|
|
|
|
this.showSDK = true
|
|
} else if (val.note1 === '平台对接') {
|
|
|
|
this.showDocking = true
|
|
} else if (val.note1 === '调用接口') {
|
|
|
|
this.showInterface = true
|
|
}
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
},
|
|
computed: {},
|
|
methods: {
|
|
setTab(name,cursel,n){
|
|
for(let i=1;i<=n;i++){
|
|
var menu=document.getElementById(name+i);
|
|
var con=document.getElementById("con_"+name+"_"+i);
|
|
menu.className=i==cursel?"hover":"";
|
|
con.style.display=i==cursel?"block":"none";
|
|
}
|
|
},
|
|
videoAndImg (link) {
|
|
|
|
if (link) {
|
|
window.open(link)
|
|
} else {
|
|
this.$message({
|
|
message: '未上传',
|
|
type: 'warning'
|
|
})
|
|
}
|
|
},
|
|
deptName () {
|
|
|
|
this.$http
|
|
.get(`/sys/dept/${this.dataForm.deptId}`)
|
|
.then(({ data: res }) => {
|
|
|
|
this.unit = res.data.name
|
|
})
|
|
},
|
|
queryPartAppByKeyIdFunction (index, indexSon, indexSonSon) {
|
|
if (this.dataForm.type === '组件服务') {
|
|
this.$http
|
|
.get(
|
|
'/dataResourceRel/queryApp4PartByKeyId' +
|
|
'?keyId=' +
|
|
this.dataForm.id
|
|
)
|
|
.then(({ data: res }) => {
|
|
this.dataView.children[index].children[indexSon].children[
|
|
indexSonSon
|
|
].note1 = ''
|
|
res.data.map((item) => {
|
|
this.dataView.children[index].children[indexSon].children[
|
|
indexSonSon
|
|
].note1 += item.name + ';'
|
|
})
|
|
})
|
|
} else {
|
|
this.$http
|
|
.get(
|
|
'/dataResourceRel/queryPart4AppByKeyId?keyId=' +
|
|
this.dataForm.id +
|
|
'&type=' +
|
|
'组件服务'
|
|
)
|
|
.then(({ data: res }) => {
|
|
this.dataView.children[index].children[indexSon].children[
|
|
indexSonSon
|
|
].note1 = ''
|
|
res.data.map((item) => {
|
|
this.dataView.children[index].children[indexSon].children[
|
|
indexSonSon
|
|
].note1 += item.name + ';'
|
|
})
|
|
})
|
|
}
|
|
}
|
|
},
|
|
created () { },
|
|
mounted () {
|
|
this.deptName()
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.el-tooltip__popper {
|
|
max-width: 300px;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.wrapper {
|
|
padding: 10px 100px;
|
|
background: #ffffff;
|
|
.other-content{
|
|
// height: 278px;
|
|
overflow-y: auto;
|
|
background: #f4f5f8;
|
|
.other-info{
|
|
display: inline;
|
|
}
|
|
.info-inner{
|
|
|
|
padding: 0px 24px;
|
|
width:33%;
|
|
height:60px;
|
|
float:left;
|
|
line-height: 60px;
|
|
display: flex;
|
|
span:nth-of-type(2){
|
|
width: 285px;
|
|
word-break: break-all;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 1;
|
|
}
|
|
}
|
|
|
|
}
|
|
.info-content{
|
|
height:315px;
|
|
background: #f4f5f8;
|
|
|
|
.info-left{
|
|
padding: 24px 24px;
|
|
overflow-y: auto;
|
|
width:58%;
|
|
height:100%;
|
|
float:left;
|
|
display:inline;
|
|
padding:24px 24px ;
|
|
.left-inner{
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
width: 50%;
|
|
float:left;
|
|
height:32px;
|
|
line-height: 32px;
|
|
|
|
}
|
|
}
|
|
.info-right{
|
|
|
|
width:42%;
|
|
height:100%;
|
|
float:left;
|
|
display:inline;
|
|
.lib_tabborder_sx{
|
|
height: 270px;
|
|
margin-top: 24px;
|
|
}
|
|
.lib_Menubox_sx {
|
|
line-height:28px;
|
|
position:relative;
|
|
float:left;
|
|
width:48x;
|
|
height:300px;
|
|
}
|
|
.lib_Menubox_sx ul{
|
|
list-style:none;
|
|
position:absolute;
|
|
text-align:center;
|
|
}
|
|
.lib_Menubox_sx li{
|
|
cursor: pointer;
|
|
color: #212121;
|
|
height: 66px;
|
|
width: 32px;
|
|
background-color: #ffffff;
|
|
border-radius: 1px;
|
|
writing-mode: vertical-lr;
|
|
}
|
|
.lib_Menubox_sx li.hover{
|
|
color: #fff;
|
|
background-color: #0058e1;
|
|
|
|
}
|
|
.lib_Contentbox_sx{
|
|
margin-left: 72px;
|
|
background: #dadada;
|
|
height: 270px;
|
|
width: 490px;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.dataTitleSon {
|
|
padding-left: 20px;
|
|
color: #212121;
|
|
font-size: 16px;
|
|
margin-bottom: 10px;
|
|
margin-top: 32px;
|
|
background: url("~@/assets/img/biaoti.png") no-repeat;
|
|
background-position-y: 2px;
|
|
|
|
}
|
|
|
|
.multipleAdditionsClass {
|
|
display: flex;
|
|
|
|
&>div {
|
|
margin-right: 30px;
|
|
border: 1px solid #3c9bcd;
|
|
width: 212px;
|
|
height: 182px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 10px;
|
|
overflow: hidden;
|
|
|
|
&>div:first-child {
|
|
margin-bottom: 10px;
|
|
font-weight: bold;
|
|
line-height: 14px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
}
|
|
|
|
&>div:nth-child(2) {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 6;
|
|
line-height: initial;
|
|
}
|
|
|
|
&>div:nth-child(3) {
|
|
width: 90%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 6;
|
|
line-height: initial;
|
|
}
|
|
}
|
|
}
|
|
|
|
.videoAndImgCss {
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
border: 1px solid #3c9bcd;
|
|
line-height: 12px;
|
|
padding: 5px;
|
|
margin-top: 10px;
|
|
background: rgba(60, 155, 205, 0.1);
|
|
display: inline-block;
|
|
}
|
|
.textAndImgY{
|
|
width: 720px;
|
|
height: 270px;
|
|
margin-right: 24px;
|
|
display: table;
|
|
|
|
.ImgSon{
|
|
display: table-cell;
|
|
width: 476px;
|
|
float: left;
|
|
height: 100%;
|
|
background: red;
|
|
}
|
|
.texton{
|
|
display: table-cell;
|
|
height: 100%;
|
|
width: 244px;
|
|
float: left;
|
|
}
|
|
|
|
}
|
|
.textAndImg {
|
|
display: flex;
|
|
// padding-left: 30px;
|
|
background:#fff;
|
|
.textAndImgSon1 {
|
|
width: 700px;
|
|
height: 270px;
|
|
.Son1-left{
|
|
float: left;
|
|
width:476px;
|
|
height: 270px;
|
|
|
|
border-radius: 2px;
|
|
}
|
|
}
|
|
.textAndImgSon {
|
|
float:left;
|
|
background: url("~@/assets/img/gongnengjieshao.png") no-repeat;
|
|
width: 170px;
|
|
height: 270px;
|
|
margin-right: 24px;
|
|
|
|
color: #fff;
|
|
border-radius: 2px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
padding: 30px 24px;
|
|
position: relative;
|
|
|
|
|
|
&>div:first-child {
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
}
|
|
&>div:nth-child(2) {
|
|
text-align: left;
|
|
-webkit-line-clamp: 5;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
word-break: break-all;
|
|
}
|
|
&>div:nth-child(3) {
|
|
margin-top: 24px;
|
|
text-align: left;
|
|
-webkit-line-clamp: 3;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
word-break: break-all;
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
|
|
.dataContent {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
}
|
|
|
|
::v-deep .el-form-item {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
::v-deep .el-form-item__label {
|
|
width: 112px;
|
|
}
|
|
|
|
::v-deep .el-form-item__content {
|
|
display: inline-block;
|
|
|
|
input {
|
|
width: 400px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|