|
|
@ -1,13 +1,23 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div> |
|
|
<div> |
|
|
<div class='card h292'> |
|
|
<div class="card h292"> |
|
|
<screen-title> |
|
|
<screen-title> |
|
|
<div slot="left" class="screen-title-left">成果展示</div> |
|
|
<div slot="left" class="screen-title-left">成果展示</div> |
|
|
</screen-title> |
|
|
</screen-title> |
|
|
<div style="padding: 16px;box-sizing: border-box;width: 100%;height: 100%; cursor: pointer;" |
|
|
<div |
|
|
@click="handelClickJumpMap"> <img src="@/assets/images/material/cgzs.png" alt=""></div> |
|
|
style=" |
|
|
|
|
|
padding: 16px; |
|
|
|
|
|
box-sizing: border-box; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
" |
|
|
|
|
|
@click="handelClickJumpMap" |
|
|
|
|
|
> |
|
|
|
|
|
<img src="@/assets/images/material/cgzs.png" alt="" /> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class='card h292 m-top12'> |
|
|
<div class="card h292 m-top12"> |
|
|
<screen-title> |
|
|
<screen-title> |
|
|
<div slot="left" class="screen-title-left">科研力量</div> |
|
|
<div slot="left" class="screen-title-left">科研力量</div> |
|
|
</screen-title> |
|
|
</screen-title> |
|
|
@ -15,9 +25,12 @@ |
|
|
<div class="top" @click="handelClickGarden"> |
|
|
<div class="top" @click="handelClickGarden"> |
|
|
<vue-seamless-scroll :class-option="optionHoverTop" :data="yjyList"> |
|
|
<vue-seamless-scroll :class-option="optionHoverTop" :data="yjyList"> |
|
|
<div class="scroll-box"> |
|
|
<div class="scroll-box"> |
|
|
<div class="scroll-item" v-for="(item, index) in yjyList" |
|
|
<div |
|
|
:key="'kyll' + index"> |
|
|
class="scroll-item" |
|
|
<span class="left">{{ item.content }}</span> |
|
|
v-for="(item, index) in yjyList" |
|
|
|
|
|
:key="'kyll' + index" |
|
|
|
|
|
> |
|
|
|
|
|
<div class="left">{{ item.content }}</div> |
|
|
<div><img :src="item.img" /></div> |
|
|
<div><img :src="item.img" /></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
@ -26,30 +39,40 @@ |
|
|
<div class="bot" @click="handelClickTalents"> |
|
|
<div class="bot" @click="handelClickTalents"> |
|
|
<vue-seamless-scroll :class-option="optionHover" :data="kyllList"> |
|
|
<vue-seamless-scroll :class-option="optionHover" :data="kyllList"> |
|
|
<div class="scroll-box"> |
|
|
<div class="scroll-box"> |
|
|
<div class="scroll-item" v-for="(item, index) in kyllList" |
|
|
<div |
|
|
:key="'kyll' + index"> |
|
|
class="scroll-item" |
|
|
|
|
|
v-for="(item, index) in kyllList" |
|
|
|
|
|
:key="'kyll' + index" |
|
|
|
|
|
> |
|
|
<img |
|
|
<img |
|
|
:src="require(`@/assets/images/resource/kyll/${item.id}.jpg`)" /> |
|
|
:src="require(`@/assets/images/resource/kyll/${item.id}.jpg`)" |
|
|
<div class="nameAndPosition"><span>{{ item.name |
|
|
/> |
|
|
}}</span><span>{{ item.position }}</span> </div> |
|
|
<div class="nameAndPosition"> |
|
|
|
|
|
<span>{{ item.name }}</span |
|
|
|
|
|
><span>{{ item.position }}</span> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</vue-seamless-scroll> |
|
|
</vue-seamless-scroll> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<div class='card h292 m-top12'> |
|
|
<div class="card h292 m-top12"> |
|
|
<screen-title> |
|
|
<screen-title> |
|
|
<div slot="left" class="screen-title-left">移风未来</div> |
|
|
<div slot="left" class="screen-title-left">移风未来</div> |
|
|
<div slot="right" class="screen-title-right"><span>在谈项目</span> <span |
|
|
<div slot="right" class="screen-title-right"> |
|
|
@click="handelClickShowMap">资源地图</span></div> |
|
|
<span>在谈项目</span> |
|
|
|
|
|
<span @click="handelClickShowMap">资源地图</span> |
|
|
|
|
|
</div> |
|
|
</screen-title> |
|
|
</screen-title> |
|
|
<div class="card-item-yfwl"> |
|
|
<div class="card-item-yfwl"> |
|
|
<vue-seamless-scroll :class-option="optionHover1" :data="yfwlList"> |
|
|
<vue-seamless-scroll :class-option="optionHover1" :data="yfwlList"> |
|
|
<div class="scroll-box"> |
|
|
<div class="scroll-box"> |
|
|
<div class="scroll-item" v-for="(item, index) in yfwlList" |
|
|
<div |
|
|
:key="'dyfc' + index"> |
|
|
class="scroll-item" |
|
|
|
|
|
v-for="(item, index) in yfwlList" |
|
|
|
|
|
:key="'dyfc' + index" |
|
|
|
|
|
> |
|
|
<div class="nameAndcontent"> |
|
|
<div class="nameAndcontent"> |
|
|
<div>{{ item.name }}</div> |
|
|
<div>{{ item.name }}</div> |
|
|
<div>所属省份：{{ item.city }}</div> |
|
|
<div>所属省份：{{ item.city }}</div> |
|
|
@ -76,7 +99,7 @@ export default { |
|
|
openWatch: true, // 开启数据实时监控刷新dom |
|
|
openWatch: true, // 开启数据实时监控刷新dom |
|
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 |
|
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 |
|
|
singleWidth: 433, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 |
|
|
singleWidth: 433, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 |
|
|
waitTime: 7000, // 单步运动停止的时间(默认值1000ms) |
|
|
waitTime: 7000 // 单步运动停止的时间(默认值1000ms) |
|
|
}, |
|
|
}, |
|
|
optionHover: { |
|
|
optionHover: { |
|
|
step: 1, // 数值越大速度滚动越快 |
|
|
step: 1, // 数值越大速度滚动越快 |
|
|
@ -86,7 +109,7 @@ export default { |
|
|
openWatch: true, // 开启数据实时监控刷新dom |
|
|
openWatch: true, // 开启数据实时监控刷新dom |
|
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 |
|
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 |
|
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 |
|
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 |
|
|
waitTime: 2000, // 单步运动停止的时间(默认值1000ms) |
|
|
waitTime: 2000 // 单步运动停止的时间(默认值1000ms) |
|
|
}, |
|
|
}, |
|
|
optionHover1: { |
|
|
optionHover1: { |
|
|
step: 1, // 数值越大速度滚动越快 |
|
|
step: 1, // 数值越大速度滚动越快 |
|
|
@ -96,7 +119,7 @@ export default { |
|
|
openWatch: true, // 开启数据实时监控刷新dom |
|
|
openWatch: true, // 开启数据实时监控刷新dom |
|
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 |
|
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 |
|
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 |
|
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 |
|
|
waitTime: 2000, // 单步运动停止的时间(默认值1000ms) |
|
|
waitTime: 2000 // 单步运动停止的时间(默认值1000ms) |
|
|
}, |
|
|
}, |
|
|
kyllList: [ |
|
|
kyllList: [ |
|
|
{ |
|
|
{ |
|
|
@ -165,18 +188,21 @@ export default { |
|
|
yjyList: [ |
|
|
yjyList: [ |
|
|
{ |
|
|
{ |
|
|
img: require('@/assets/images/resource/kyll/garden.png'), |
|
|
img: require('@/assets/images/resource/kyll/garden.png'), |
|
|
content: '青岛大沽河流域国家农业科技园由即墨农业高新区和青岛生物高新科技产业园合并，与2021年3月正式挂牌成立。园区是以大沽河流域为核心，覆盖青岛带动周边的经济发展。' |
|
|
content: |
|
|
|
|
|
'青岛大沽河流域国家农业科技园由即墨农业高新区和青岛生物高新科技产业园合并，与2021年3月正式挂牌成立。园区是以大沽河流域为核心，覆盖青岛带动周边的经济发展。' |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
img: require('@/assets/images/resource/kyll/delong.png'), |
|
|
img: require('@/assets/images/resource/kyll/delong.png'), |
|
|
content: '青岛德龙种子有限公司主要任务是开展技术合作服务，具体内容包括：优质蔬菜新品种选育、设施蔬菜栽培技术和病虫害绿色防控技术的试验、示范与推广等。' |
|
|
content: |
|
|
|
|
|
'青岛德龙种子有限公司主要任务是开展技术合作服务，具体内容包括：优质蔬菜新品种选育、设施蔬菜栽培技术和病虫害绿色防控技术的试验、示范与推广等。' |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
img: require('@/assets/images/resource/kyll/jmy.png'), |
|
|
img: require('@/assets/images/resource/kyll/jmy.png'), |
|
|
content: '青岛吉茂源农业科技有限公司在农业垃圾分类的生产性废弃物生物转化系统技术的建立与运行示范等领域开展产品与技术开发、科技成果的推广与转化等工作。' |
|
|
content: |
|
|
|
|
|
'青岛吉茂源农业科技有限公司在农业垃圾分类的生产性废弃物生物转化系统技术的建立与运行示范等领域开展产品与技术开发、科技成果的推广与转化等工作。' |
|
|
} |
|
|
} |
|
|
] |
|
|
] |
|
|
}; |
|
|
} |
|
|
}, |
|
|
}, |
|
|
created () {}, |
|
|
created () {}, |
|
|
methods: { |
|
|
methods: { |
|
|
@ -199,7 +225,7 @@ export default { |
|
|
}, |
|
|
}, |
|
|
components: {}, |
|
|
components: {}, |
|
|
computed: {}, |
|
|
computed: {}, |
|
|
watch: {}, |
|
|
watch: {} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
@ -236,6 +262,12 @@ export default { |
|
|
flex: 1; |
|
|
flex: 1; |
|
|
padding-left: 3px; |
|
|
padding-left: 3px; |
|
|
box-sizing: border-box; |
|
|
box-sizing: border-box; |
|
|
|
|
|
width: 217px; |
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
-webkit-line-clamp: 4; |
|
|
|
|
|
/* 显示的行数 */ |
|
|
|
|
|
-webkit-box-orient: vertical; |
|
|
|
|
|
text-overflow: ellipsis; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
img { |
|
|
img { |
|
|
@ -243,11 +275,8 @@ export default { |
|
|
height: 102px; |
|
|
height: 102px; |
|
|
margin-left: 5px; |
|
|
margin-left: 5px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.bot { |
|
|
.bot { |
|
|
@ -262,7 +291,7 @@ export default { |
|
|
|
|
|
|
|
|
.scroll-item { |
|
|
.scroll-item { |
|
|
@include flex(column); |
|
|
@include flex(column); |
|
|
border: 1px solid #9FCCFF; |
|
|
border: 1px solid #9fccff; |
|
|
width: 148px; |
|
|
width: 148px; |
|
|
height: 117px; |
|
|
height: 117px; |
|
|
margin-right: 5px; |
|
|
margin-right: 5px; |
|
|
@ -275,12 +304,12 @@ export default { |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
padding: 0 6px 0 10px; |
|
|
padding: 0 6px 0 10px; |
|
|
box-sizing: border-box; |
|
|
box-sizing: border-box; |
|
|
background: url('~@/assets/images/index/yfyskuang.png'); |
|
|
background: url("~@/assets/images/index/yfyskuang.png"); |
|
|
background-size: 100% 100%; |
|
|
background-size: 100% 100%; |
|
|
|
|
|
|
|
|
> :nth-child(2) { |
|
|
> :nth-child(2) { |
|
|
font-size: 10px; |
|
|
font-size: 10px; |
|
|
color: #C0D3F3; |
|
|
color: #c0d3f3; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@ -291,7 +320,6 @@ export default { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@ -320,7 +348,7 @@ export default { |
|
|
> :nth-child(3) { |
|
|
> :nth-child(3) { |
|
|
margin-top: 7px; |
|
|
margin-top: 7px; |
|
|
font-size: 14px; |
|
|
font-size: 14px; |
|
|
color: #BDCEEA; |
|
|
color: #bdceea; |
|
|
display: -webkit-box; |
|
|
display: -webkit-box; |
|
|
max-height: 3.6em; |
|
|
max-height: 3.6em; |
|
|
/* 两行文本的高度，可以根据实际情况调整 */ |
|
|
/* 两行文本的高度，可以根据实际情况调整 */ |
|
|
@ -332,8 +360,6 @@ export default { |
|
|
/* 超出部分显示省略号 */ |
|
|
/* 超出部分显示省略号 */ |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
