elink-star
/
yifeng_integration
16
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

代码提交

master
juwei001 1 year ago
parent
762c1a870b
commit
467481820c
3 changed files with 624 additions and 592 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/views/next/dialog-module/zdyf-center/qyjj/index.vue
  2. 586
      src/views/next/dialog-module/zdyf-left/yfcj/index.vue
  3. 638
      src/views/next/screen-content-right/zdyf-right/index.vue

2
src/views/next/dialog-module/zdyf-center/qyjj/index.vue
View File

@ -122,7 +122,7 @@ export default {
unitAddress: '山东省青岛市即墨市移风店镇孙家村', unitAddress: '山东省青岛市即墨市移风店镇孙家村',
unitLogo: require('@/assets/images/resource/qyjj/rksw/logo.png'), unitLogo: require('@/assets/images/resource/qyjj/rksw/logo.png'),
unitUrl: 'https://www.rijkzwaan.cn/', unitUrl: 'https://www.rijkzwaan.cn/',
unitNotation: '目前在世界蔬菜种子行业中，瑞克斯旺名列前四位，是全球知名的种子企业之一，', unitNotation: '目前在世界蔬菜种子行业中，瑞克斯旺名列前四位，是全球知名的种子企业之一。',
unitIntroduction: '瑞克斯旺（中国）农业科技有限公司，是瑞克斯旺种子种苗集团在中国的子公司，主要从事蔬菜新品种和新技术的引进、研发、推广及服务工作。公司位于山东青岛即墨区移风店镇孙家村，占地面积约480亩，拥有国际一流的蔬菜科研中心，其中包括8000平方米现代化智能玻璃温室、51个冬暖式日光温室和41个塑料大拱棚，并配有设施完备的科研实验室。公司拥有雄厚的科研实力和一支业务精湛的技术服务团队，服务网络遍及全国，服务对象达到20多万人。目前，瑞克斯旺中国在全国各地成功开发与推广番茄、茄子、彩椒、辣椒、黄瓜、菠菜等优良品种百余个，这些品种已成为广大种植户的首选品种，同时也是出口基地、超市等高端消费市场的主导产品，创造了良好的经济效益和社会效益。瑞克斯旺中国将继续恪守共享健康未来的使命，与广大合作伙伴亲密合作，致力于为种植者和消费者们提供新鲜、健康、有趣的优质产品，为推动中国现代化农业可持续发展做出贡献。', unitIntroduction: '瑞克斯旺（中国）农业科技有限公司，是瑞克斯旺种子种苗集团在中国的子公司，主要从事蔬菜新品种和新技术的引进、研发、推广及服务工作。公司位于山东青岛即墨区移风店镇孙家村，占地面积约480亩，拥有国际一流的蔬菜科研中心，其中包括8000平方米现代化智能玻璃温室、51个冬暖式日光温室和41个塑料大拱棚，并配有设施完备的科研实验室。公司拥有雄厚的科研实力和一支业务精湛的技术服务团队，服务网络遍及全国，服务对象达到20多万人。目前，瑞克斯旺中国在全国各地成功开发与推广番茄、茄子、彩椒、辣椒、黄瓜、菠菜等优良品种百余个，这些品种已成为广大种植户的首选品种，同时也是出口基地、超市等高端消费市场的主导产品，创造了良好的经济效益和社会效益。瑞克斯旺中国将继续恪守共享健康未来的使命，与广大合作伙伴亲密合作，致力于为种植者和消费者们提供新鲜、健康、有趣的优质产品，为推动中国现代化农业可持续发展做出贡献。',
honorImg: [ honorImg: [
// require('@/assets/img/meritBadges1.png'), // require('@/assets/img/meritBadges1.png'),

586
src/views/next/dialog-module/zdyf-left/yfcj/index.vue
View File

@ -1,328 +1,334 @@
<template> <template>
<div class="modal" v-show="yfcj"> <div class="modal" v-show="yfcj">
<section> <section>
<div class="dialog_header"> <div class="dialog_header">
<div class="close-icon" @click="closeDialog"> <div class="close-icon" @click="closeDialog">
<img src="@/assets/images/common/dialog-colse.png" alt="" /> <img src="@/assets/images/common/dialog-colse.png" alt="" />
</div> </div>
<div class="title-container"> <div class="title-container">
<div class="title">{{ dialogTitle }}</div> <div class="title">{{ dialogTitle }}</div>
</div> </div>
</div>
<div class="dialog_body">
<div class="content">
<div class="left">
<div class="item" v-for="(item, index) in leftlist" :key="index">
<div class="time" v-show="item.time">
{{ item.time }}
</div>
<div class="unit">
{{ item.unit }}
</div>
</div> </div>
<div class="dialog_body"> </div>
<div class="content"> <div class="right">
<div class="left"> <div class="item" v-for="(item, index) in rightList" :key="index">
<div class="item" v-for="(item, index) in leftlist" :key="index"> <img
<div class="time" v-show="item.time"> :src="item.imageSrc"
{{ item.time }} alt=""
</div> class="m-r16"
<div class="unit"> />
{{ item.unit }} <section>
</div> <div class="unit">
</div> <span>{{ item.name }}</span>
</div>
<div class="right">
<div class="item" v-for="(item, index) in rightList" :key="index">
<img :src="item.imageSrc" alt="" v-show="index % 2 === 0" class="m-r16">
<section>
<div class="unit"><span>{{ item.name }}</span></div>
<p class="introduce">{{ item.content }}</p>
</section>
<img :src="item.imageSrc" alt="" v-show="index % 2 != 0" class="m-l16">
</div>
</div>
</div> </div>
<p class="introduce">{{ item.content }}</p>
</section>
<!-- <img
:src="item.imageSrc"
alt=""
class="m-l16"
/> -->
</div> </div>
</section> </div>
</div> </div>
</div>
</section>
</div>
</template> </template>
<script> <script>
import { mapGetters, mapActions } from 'vuex' import { mapGetters, mapActions } from 'vuex'
export default { export default {
name: '', name: '',
data() { data () {
return { return {
dialogTitle: '发展历程', dialogTitle: '发展历程',
leftlist: [ leftlist: [
{ {
time: '2012年03月', time: '2012年03月',
unit: '青岛浩丰生物科技有限公司签约落户' unit: '青岛浩丰生物科技有限公司签约落户'
}, },
{ {
time: '2017年08月', time: '2017年08月',
unit: '瑞克斯旺科研中心开工建设' unit: '瑞克斯旺科研中心开工建设'
}, },
{ {
time: '2017年11月', time: '2017年11月',
unit: '青岛硕丰源种业签约落户' unit: '青岛硕丰源种业签约落户'
}, },
{ {
time: '2018年01月', time: '2018年01月',
unit: '青岛硕丰源研发中心与育苗工厂开工建设' unit: '青岛硕丰源研发中心与育苗工厂开工建设'
}, { },
time: '2018年09月', {
unit: '韩国农友BIO株式会社、日本伯格地球株式会社到产业园考察、洽谈' time: '2018年09月',
}, { unit: '韩国农友BIO株式会社、日本伯格地球株式会社到产业园考察、洽谈'
time: '2018年10月', },
unit: '青岛美田花卉种子有限公司签约落户' {
}, { time: '2018年10月',
time: '2019年02月', unit: '青岛美田花卉种子有限公司签约落户'
unit: '青岛普瑞达灵芝研发中心项 目签约落户' },
}, { {
time: '2019年04月', time: '2019年02月',
unit: '韩国农友（北京世农种苗）签约落户' unit: '青岛普瑞达灵芝研发中心项 目签约落户'
}, { },
time: '2019年04月', {
unit: '青岛德龙种子签约落户' time: '2019年04月',
} unit: '韩国农友（北京世农种苗）签约落户'
], },
rightList: [ {
{ time: '2019年04月',
name: '青岛浩丰生物科技有限公司', unit: '青岛德龙种子签约落户'
content: '主要业务包括种苗培育、种植加工、仓储销售，曾先后被授予为青岛市农业产业化重点龙头企业、青岛市市控蔬菜基地、山东省现代生态循环农业示范点、青岛市绿色园艺产业园等荣誉。',
imageSrc: require('@/assets/images/resource/yfcj/1.jpg')
},
{
name: '瑞克斯旺（中国）农业科技有限公司',
content: '主要从事蔬菜新品种和新技术的引进、研发、推广及服务工作。瑞克斯旺中国在全国各地成功开发与推广番茄、茄子、彩椒、辣椒、黄瓜、菠菜等优良品种百余个。',
imageSrc: require('@/assets/images/resource/yfcj/ruikesiwang.png')
},
{
name: '青岛硕丰源种业有限公司',
content: '专业致力于旱黄瓜良种的研究、开发与服务为一体的农业高科技企业。是国内最大的一家专业从中国华南型黄瓜种子研发、生产、销售的科技型公司。',
imageSrc: require('@/assets/images/resource/yfcj/shuofengyuan.png')
},
{
name: '青岛美田花卉种子有限公司',
content: '主要从事蔬菜新品种和新技术的引进、研发、推广及服务工作。瑞克斯旺中国在全国各地成功开与推广番茄、茄子、彩椒、辣椒、黄瓜、菠菜等优良品种百余个。',
imageSrc: require('@/assets/images/resource/yfcj/meitian.png')
},
{
name: '青岛德龙种子有限公司',
content: '规模化新优品种花卉生产而著称。是一家种质资源丰富、技术力量雄厚，集高品质花卉生产和花卉景观设计、施工、养护为一体的综合性公司。',
imageSrc: require('@/assets/images/resource/yfcj/delong.png')
}
]
} }
}, ],
computed: { rightList: [
...mapGetters(['yfcj']) {
}, name: '青岛浩丰生物科技有限公司',
components: { content:
}, '主要业务包括种苗培育、种植加工、仓储销售，曾先后被授予为青岛市农业产业化重点龙头企业、青岛市市控蔬菜基地、山东省现代生态循环农业示范点、青岛市绿色园艺产业园等荣誉。',
watch: { imageSrc: require('@/assets/images/resource/yfcj/1.jpg')
},
created() {
},
methods: {
...mapActions({
showGlobalDialog: 'showGlobalDialog'
}),
closeDialog() {
this.showGlobalDialog('')
}, },
{
name: '瑞克斯旺（中国）农业科技有限公司',
content:
'主要从事蔬菜新品种和新技术的引进、研发、推广及服务工作。瑞克斯旺中国在全国各地成功开发与推广番茄、茄子、彩椒、辣椒、黄瓜、菠菜等优良品种百余个。',
imageSrc: require('@/assets/images/resource/yfcj/ruikesiwang.png')
},
{
name: '青岛硕丰源种业有限公司',
content:
'专业致力于旱黄瓜良种的研究、开发与服务为一体的农业高科技企业。是国内最大的一家专业从中国华南型黄瓜种子研发、生产、销售的科技型公司。',
imageSrc: require('@/assets/images/resource/yfcj/shuofengyuan.png')
},
{
name: '青岛美田花卉种子有限公司',
content:
'主要从事蔬菜新品种和新技术的引进、研发、推广及服务工作。瑞克斯旺中国在全国各地成功开与推广番茄、茄子、彩椒、辣椒、黄瓜、菠菜等优良品种百余个。',
imageSrc: require('@/assets/images/resource/yfcj/meitian.png')
},
{
name: '青岛德龙种子有限公司',
content:
'规模化新优品种花卉生产而著称。是一家种质资源丰富、技术力量雄厚，集高品质花卉生产和花卉景观设计、施工、养护为一体的综合性公司。',
imageSrc: require('@/assets/images/resource/yfcj/delong.png')
}
]
}
},
computed: {
...mapGetters(['yfcj'])
},
components: {},
watch: {},
created () {},
methods: {
...mapActions({
showGlobalDialog: 'showGlobalDialog'
}),
closeDialog () {
this.showGlobalDialog('')
} }
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.modal { .modal {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 150; z-index: 150;
>section { > section {
@include flex(column); @include flex(column);
background: url('~@/assets/images/common/dialog-bg.png') no-repeat !important; background: url("~@/assets/images/common/dialog-bg.png") no-repeat !important;
background-size: 100% 100%;
width: 1180px;
height: 716px;
overflow: hidden;
padding-bottom: 16px;
box-sizing: border-box;
.dialog_header {
position: relative;
.close-icon {
width: 18px;
height: 18px;
position: absolute;
top: 10px;
right: 16px;
cursor: pointer;
}
.title-container {
align-items: center;
background: url("~@/assets/images/common/dialog-header.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
width: 1180px; display: flex;
height: 716px; justify-content: center;
overflow: hidden; height: 60px;
padding-bottom: 16px; font-size: 26px;
box-sizing: border-box;
.title {
.dialog_header { font-family: zaozigongfang;
position: relative; letter-spacing: 2px;
line-height: 50px;
background-size: 100% 100%;
display: flex;
justify-content: center;
height: 60px;
font-size: 26px;
color: #fff;
}
}
}
.close-icon { .dialog_body {
width: 18px; position: relative;
height: 18px; overflow-y: scroll;
position: absolute; padding: 40px 4px 40px 80px;
top: 10px; box-sizing: border-box;
right: 16px; flex: 1;
cursor: pointer;
&::-webkit-scrollbar {
width: 5px;
}
&::-webkit-scrollbar-track {
border-radius: 10px;
background: rgba(12, 129, 254, 0.24);
}
&::-webkit-scrollbar-thumb {
border-radius: 10px;
background: linear-gradient(270deg, #0063fe, #0095ff);
}
.content {
color: #fff;
width: 100%;
height: 100%;
display: flex;
.left {
width: 373px;
height: 100%;
display: grid;
> .item {
display: flex;
.time {
line-height: 18px;
width: fit-content;
padding: 1px 16px;
box-sizing: border-box;
background: #dee7f3;
color: #073983;
height: 19px;
border-radius: 9px;
margin-right: 30px;
} }
.title-container { .unit {
align-items: center; border-left: solid 4px#256DD6;
background: url('~@/assets/images/common/dialog-header.png') no-repeat; flex: 1;
background-size: 100% 100%; padding-left: 26px;
display: flex; position: relative;
justify-content: center;
height: 60px; &::after {
font-size: 26px; content: "";
background: #ffffff;
.title { width: 13px;
font-family: zaozigongfang; height: 13px;
letter-spacing: 2px; border-radius: 50%;
line-height: 50px; position: absolute;
background-size: 100% 100%; left: -8px;
display: flex; top: 0;
justify-content: center; }
height: 60px;
font-size: 26px;
color: #fff;
}
} }
}
} }
.dialog_body { .right {
position: relative; flex: 1;
overflow-y: scroll; margin-left: 113px;
padding: 40px 78px 40px 80px; overflow-y: scroll;
padding-right: 2px;
padding-right: 78px;
> .item {
display: flex;
height: 150px;
overflow: hidden;
border-bottom: 1px dashed #5a89f7;
align-items: center;
justify-content: center;
padding: 16px 0;
box-sizing: border-box; box-sizing: border-box;
flex: 1;
&::-webkit-scrollbar { img {
width: 3px; width: 200px;
height: 120px;
} }
section {
&::-webkit-scrollbar-track { flex: 1;
border-radius: 10px; // padding-left: 18px;
background: rgba(12, 129, 254, 0.24); // box-sizing: border-box;
} .unit {
&::-webkit-scrollbar-thumb {
border-radius: 10px;
background: linear-gradient(270deg, #0063fe, #0095ff);
}
.content {
color: #fff;
width: 100%; width: 100%;
height: 100%; text-align: center;
display: flex; span {
width: fit-content;
.left { padding: 3px 12px;
width: 373px; background: #d79328;
height: 100%; border-radius: 12px;
display: grid;
>.item {
display: flex;
.time {
width: fit-content;
padding: 1px 16px;
box-sizing: border-box;
background: #dee7f3;
color: #073983;
height: 19px;
border-radius: 9px;
margin-right: 30px;
}
.unit {
border-left: solid 4px#256DD6;
flex: 1;
padding-left: 26px;
position: relative;
&::after {
content: '';
background: #FFFFFF;
width: 13px;
height: 13px;
border-radius: 50%;
position: absolute;
left: -8px;
top: 0;
}
}
}
}
.right {
flex: 1;
margin-left: 113px;
overflow-y: scroll;
padding-right:2px ;
>.item {
display: flex;
height: 150px;
overflow: hidden;
border-bottom: 1px dashed #5A89F7;
overflow: hidden;
align-items: center;
justify-content: center;
padding: 16px 0;
box-sizing: border-box;
img {
width: 200px;
height: 120px;
}
section {
flex: 1;
// padding-left: 18px;
// box-sizing: border-box;
.unit{
width: 100%;
text-align: center;
span{
width: fit-content;
padding:3px 12px ;
background:#d79328 ;
border-radius:12px ;
}
}
.introduce {
font-size: 14px;
}
}
}
&::-webkit-scrollbar {
width: 3px;
}
&::-webkit-scrollbar-track {
border-radius: 10px;
background: rgba(12, 129, 254, 0.24);
}
&::-webkit-scrollbar-thumb {
border-radius: 10px;
background: linear-gradient(270deg, #0063fe, #0095ff);
}
} }
}
.introduce {
font-size: 14px;
}
} }
}
&::-webkit-scrollbar {
width: 3px;
}
&::-webkit-scrollbar-track {
border-radius: 10px;
background: rgba(12, 129, 254, 0.24);
}
&::-webkit-scrollbar-thumb {
border-radius: 10px;
background: linear-gradient(270deg, #0063fe, #0095ff);
}
} }
}
} }
}
} }
.m-r16{ .m-r16 {
margin-right: 16px; margin-right: 16px;
} }
.m-l16{ .m-l16 {
margin-left: 16px; margin-left: 16px;
} }
</style> </style>

638
src/views/next/screen-content-right/zdyf-right/index.vue
View File

@ -1,345 +1,371 @@
<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="
</div> padding: 16px;
<div class='card h292 m-top12'> box-sizing: border-box;
<screen-title> width: 100%;
<div slot="left" class="screen-title-left">科研力量</div> height: 100%;
</screen-title> cursor: pointer;
<div class="card-item-kyll"> "
<div class="top" @click="handelClickGarden"> @click="handelClickJumpMap"
<vue-seamless-scroll :class-option="optionHoverTop" :data="yjyList"> >
<div class="scroll-box"> <img src="@/assets/images/material/cgzs.png" alt="" />
<div class="scroll-item" v-for="(item, index) in yjyList" </div>
:key="'kyll' + index"> </div>
<span class="left">{{ item.content }}</span> <div class="card h292 m-top12">
<div> <img :src="item.img" /></div> <screen-title>
</div> <div slot="left" class="screen-title-left">科研力量</div>
</div> </screen-title>
</vue-seamless-scroll> <div class="card-item-kyll">
</div> <div class="top" @click="handelClickGarden">
<div class="bot" @click="handelClickTalents"> <vue-seamless-scroll :class-option="optionHoverTop" :data="yjyList">
<vue-seamless-scroll :class-option="optionHover" :data="kyllList"> <div class="scroll-box">
<div class="scroll-box"> <div
<div class="scroll-item" v-for="(item, index) in kyllList" class="scroll-item"
:key="'kyll' + index"> v-for="(item, index) in yjyList"
<img :key="'kyll' + index"
:src="require(`@/assets/images/resource/kyll/${item.id}.jpg`)" /> >
<div class="nameAndPosition"><span>{{ item.name <div class="left">{{ item.content }}</div>
}}</span><span>{{ item.position }}</span> </div> <div><img :src="item.img" /></div>
</div> </div>
</div> </div>
</vue-seamless-scroll> </vue-seamless-scroll>
</div> </div>
</div> <div class="bot" @click="handelClickTalents">
<vue-seamless-scroll :class-option="optionHover" :data="kyllList">
</div> <div class="scroll-box">
<div class='card h292 m-top12'> <div
<screen-title> class="scroll-item"
<div slot="left" class="screen-title-left">移风未来</div> v-for="(item, index) in kyllList"
<div slot="right" class="screen-title-right"><span>在谈项目</span> <span :key="'kyll' + index"
@click="handelClickShowMap">资源地图</span></div> >
</screen-title> <img
<div class="card-item-yfwl"> :src="require(`@/assets/images/resource/kyll/${item.id}.jpg`)"
<vue-seamless-scroll :class-option="optionHover1" :data="yfwlList"> />
<div class="scroll-box"> <div class="nameAndPosition">
<div class="scroll-item" v-for="(item, index) in yfwlList" <span>{{ item.name }}</span
:key="'dyfc' + index"> ><span>{{ item.position }}</span>
<div class="nameAndcontent">
<div>{{ item.name }}</div>
<div>所属省份：{{ item.city }}</div>
<div>{{ item.content }}</div>
</div>
</div>
</div>
</vue-seamless-scroll>
</div>
</div> </div>
</div>
</div>
</vue-seamless-scroll>
</div> </div>
</div>
</div>
<div class="card h292 m-top12">
<screen-title>
<div slot="left" class="screen-title-left">移风未来</div>
<div slot="right" class="screen-title-right">
<span>在谈项目</span>
<span @click="handelClickShowMap">资源地图</span>
</div>
</screen-title>
<div class="card-item-yfwl">
<vue-seamless-scroll :class-option="optionHover1" :data="yfwlList">
<div class="scroll-box">
<div
class="scroll-item"
v-for="(item, index) in yfwlList"
:key="'dyfc' + index"
>
<div class="nameAndcontent">
<div>{{ item.name }}</div>
<div>所属省份：{{ item.city }}</div>
<div>{{ item.content }}</div>
</div>
</div>
</div>
</vue-seamless-scroll>
</div>
</div>
</div>
</template> </template>
<script> <script>
import { mapActions } from 'vuex' import { mapActions } from 'vuex'
export default { export default {
data() { data () {
return { return {
optionHoverTop: { optionHoverTop: {
step: 8, // 数值越大速度滚动越快 step: 8, // 数值越大速度滚动越快
limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop hoverStop: true, // 是否开启鼠标悬停stop
direction: 2, // 0向下 1向上 2向左 3向右 direction: 2, // 0向下 1向上 2向左 3向右
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, // 数值越大速度滚动越快
limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop hoverStop: true, // 是否开启鼠标悬停stop
direction: 2, // 0向下 1向上 2向左 3向右 direction: 2, // 0向下 1向上 2向左 3向右
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, // 数值越大速度滚动越快
limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右 direction: 1, // 0向下 1向上 2向左 3向右
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: [
{ {
name: '印象初', name: '印象初',
id: '1', id: '1',
position: '中国科学院硕士' position: '中国科学院硕士'
}, },
{ {
name: '李天来', name: '李天来',
id: '2', id: '2',
position: '工程院院士' position: '工程院院士'
}, },
{ {
name: '孙忠奎', name: '孙忠奎',
id: '3', id: '3',
position: '总经理' position: '总经理'
}, },
{ {
name: '贾太', name: '贾太',
id: '4', id: '4',
position: '即墨区杰出青年' position: '即墨区杰出青年'
} }
], ],
yfwlList: [ yfwlList: [
{ {
name: '安微福斯特种苗有限公司', name: '安微福斯特种苗有限公司',
city: '安微', city: '安微',
content: '辣椒、甜椒、番茄、西瓜、南瓜。' content: '辣椒、甜椒、番茄、西瓜、南瓜。'
}, },
{ {
name: '广西子龙种业有限公司', name: '广西子龙种业有限公司',
city: '广西', city: '广西',
content: '豇豆、辣椒、瓜类、大小白菜、生菜、菠菜、韭菜等。' content: '豇豆、辣椒、瓜类、大小白菜、生菜、菠菜、韭菜等。'
}, },
{ {
name: '上海源怡种苗股份有限公司', name: '上海源怡种苗股份有限公司',
city: '上海', city: '上海',
content: '花卉种苗。' content: '花卉种苗。'
}, },
{ {
name: '上海惠和种业有限公司', name: '上海惠和种业有限公司',
city: '上海', city: '上海',
content: '葱蒜类、瓜类、根茎类、茄果类。' content: '葱蒜类、瓜类、根茎类、茄果类。'
}, },
{ {
name: '坂田种苗（苏州）有限公司', name: '坂田种苗（苏州）有限公司',
city: '江苏', city: '江苏',
content: '叶菜和果菜；花卉。' content: '叶菜和果菜；花卉。'
},
{
name: '长沙百奥云数据科技有限公司',
city: '湖南',
content: '育种服务。'
},
{
name: '山东种业集团有限公司',
city: '山东',
content: '大田作物、果蔬。'
},
{
name: '青岛农兴种业科技有限公司',
city: '山东',
content: '鲜食花生。'
}
],
yjyList: [
{
img: require('@/assets/images/resource/kyll/garden.png'),
content: '青岛大沽河流域国家农业科技园由即墨农业高新区和青岛生物高新科技产业园合并，与2021年3月正式挂牌成立。园区是以大沽河流域为核心，覆盖青岛带动周边的经济发展。'
},
{
img: require('@/assets/images/resource/kyll/delong.png'),
content: '青岛德龙种子有限公司主要任务是开展技术合作服务，具体内容包括：优质蔬菜新品种选育、设施蔬菜栽培技术和病虫害绿色防控技术的试验、示范与推广等。'
},
{
img: require('@/assets/images/resource/kyll/jmy.png'),
content: '青岛吉茂源农业科技有限公司在农业垃圾分类的生产性废弃物生物转化系统技术的建立与运行示范等领域开展产品与技术开发、科技成果的推广与转化等工作。'
}
]
};
}, },
created() { }, {
methods: { name: '长沙百奥云数据科技有限公司',
...mapActions({ city: '湖南',
// set_garden: 'SET_GARDEN', content: '育种服务。'
set_talents: 'SET_TALENTS'
}),
handelClickTalents() {
this.set_talents(true)
},
handelClickGarden() {
this.$EventBus.$emit('switcMapType', 'garden')
},
handelClickJumpMap() {
this.$EventBus.$emit('switcMapType', 'unit')
},
handelClickShowMap() {
this.$EventBus.$emit('switcMapType', 'resource')
}
}, },
components: {}, {
computed: {}, name: '山东种业集团有限公司',
watch: {}, city: '山东',
content: '大田作物、果蔬。'
},
{
name: '青岛农兴种业科技有限公司',
city: '山东',
content: '鲜食花生。'
}
],
yjyList: [
{
img: require('@/assets/images/resource/kyll/garden.png'),
content:
'青岛大沽河流域国家农业科技园由即墨农业高新区和青岛生物高新科技产业园合并，与2021年3月正式挂牌成立。园区是以大沽河流域为核心，覆盖青岛带动周边的经济发展。'
},
{
img: require('@/assets/images/resource/kyll/delong.png'),
content:
'青岛德龙种子有限公司主要任务是开展技术合作服务，具体内容包括：优质蔬菜新品种选育、设施蔬菜栽培技术和病虫害绿色防控技术的试验、示范与推广等。'
},
{
img: require('@/assets/images/resource/kyll/jmy.png'),
content:
'青岛吉茂源农业科技有限公司在农业垃圾分类的生产性废弃物生物转化系统技术的建立与运行示范等领域开展产品与技术开发、科技成果的推广与转化等工作。'
}
]
}
},
created () {},
methods: {
...mapActions({
// set_garden: 'SET_GARDEN',
set_talents: 'SET_TALENTS'
}),
handelClickTalents () {
this.set_talents(true)
},
handelClickGarden () {
this.$EventBus.$emit('switcMapType', 'garden')
},
handelClickJumpMap () {
this.$EventBus.$emit('switcMapType', 'unit')
},
handelClickShowMap () {
this.$EventBus.$emit('switcMapType', 'resource')
}
},
components: {},
computed: {},
watch: {}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.card { .card {
width: 100%; width: 100%;
&-item-kyll {
flex: 1;
@include flex(column);
padding: 16px 16px 10px;
box-sizing: border-box;
overflow: hidden;
.top { &-item-kyll {
display: flex; flex: 1;
cursor: pointer; @include flex(column);
overflow: hidden; padding: 16px 16px 10px;
height: 100px; box-sizing: border-box;
overflow: hidden;
.scroll-box { .top {
display: flex; display: flex;
// justify-content: space-around; cursor: pointer;
overflow: hidden; overflow: hidden;
height: 100px;
.scroll-item { .scroll-box {
@include flex(); display: flex;
margin-right: 5px; // justify-content: space-around;
cursor: pointer; overflow: hidden;
width: 430px;
.left { .scroll-item {
text-indent: 2em; @include flex();
flex: 1; margin-right: 5px;
padding-left: 3px; cursor: pointer;
box-sizing: border-box; width: 430px;
}
img { .left {
width: 139px; text-indent: 2em;
height: 102px; flex: 1;
margin-left: 5px; padding-left: 3px;
} box-sizing: border-box;
width: 217px;
overflow: hidden;
-webkit-line-clamp: 4;
/* 显示的行数 */
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
img {
width: 139px;
height: 102px;
margin-left: 5px;
}
}
}
}
} .bot {
} flex: 1;
overflow: hidden;
} margin-top: 5px;
.bot {
flex: 1;
overflow: hidden;
margin-top: 5px;
.scroll-box {
display: flex;
justify-content: space-around;
overflow: hidden;
.scroll-item { .scroll-box {
@include flex(column); display: flex;
border: 1px solid #9FCCFF; justify-content: space-around;
width: 148px; overflow: hidden;
height: 117px;
margin-right: 5px;
cursor: pointer;
.nameAndPosition { .scroll-item {
height: 31px; @include flex(column);
display: flex; border: 1px solid #9fccff;
justify-content: space-between; width: 148px;
align-items: center; height: 117px;
padding: 0 6px 0 10px; margin-right: 5px;
box-sizing: border-box; cursor: pointer;
background: url('~@/assets/images/index/yfyskuang.png');
background-size: 100% 100%;
>:nth-child(2) { .nameAndPosition {
font-size: 10px; height: 31px;
color: #C0D3F3; display: flex;
} justify-content: space-between;
} align-items: center;
padding: 0 6px 0 10px;
box-sizing: border-box;
background: url("~@/assets/images/index/yfyskuang.png");
background-size: 100% 100%;
img { > :nth-child(2) {
margin: 5px 5px 0 5px; font-size: 10px;
width: 138px; color: #c0d3f3;
height: 80px; }
} }
}
}
} img {
margin: 5px 5px 0 5px;
width: 138px;
height: 80px;
}
} }
}
}
}
&-item-yfwl { &-item-yfwl {
height: 223px; height: 223px;
@include flex(column); @include flex(column);
padding: 16px; padding: 16px;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
margin-top: 16px; margin-top: 16px;
.scroll-box {
overflow: hidden;
.scroll-item {
@include flex();
margin-top: 2px;
background: rgba(71, 132, 237, 0.28);
padding: 8px 11px;
box-sizing: border-box;
.nameAndcontent { .scroll-box {
margin-left: 10px; overflow: hidden;
>:nth-child(2), .scroll-item {
>:nth-child(3) { @include flex();
margin-top: 7px; margin-top: 2px;
font-size: 14px; background: rgba(71, 132, 237, 0.28);
color: #BDCEEA; padding: 8px 11px;
display: -webkit-box; box-sizing: border-box;
max-height: 3.6em;
/* 两行文本的高度，可以根据实际情况调整 */
overflow: hidden;
-webkit-line-clamp: 2;
/* 显示的行数 */
-webkit-box-orient: vertical;
text-overflow: ellipsis;
/* 超出部分显示省略号 */
}
}
.nameAndcontent {
margin-left: 10px;
} > :nth-child(2),
} > :nth-child(3) {
margin-top: 7px;
font-size: 14px;
color: #bdceea;
display: -webkit-box;
max-height: 3.6em;
/* 两行文本的高度，可以根据实际情况调整 */
overflow: hidden;
-webkit-line-clamp: 2;
/* 显示的行数 */
-webkit-box-orient: vertical;
text-overflow: ellipsis;
/* 超出部分显示省略号 */
}
} }
}
}
}
} }
.paragraph { .paragraph {
text-indent: 2em; text-indent: 2em;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save