williamet/jiace-web
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
熊丽君
2021-10-28 09:33:19 +08:00
parent 031d56fb23
commit d198130a6d
1 changed files with 26 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/views/home/home.vue
View File

@ -438,20 +438,30 @@
<div class="cooperation"> <div class="cooperation">
<img src="@/assets/image/icon8.png" alt="" /> <img src="@/assets/image/icon8.png" alt="" />
</div> </div>
<vue-seamless-scroll <div @mouseover="classOption.step = 0" @mouseleave="classOption.step = 1">
:data="listData" <vue-seamless-scroll
:class-option="classOption" :data="listData"
class="warp" :class-option="classOption"
> class="warp"
<div style="width:1200px"> >
<ul class="ul-item"> <ul class="ul-item">
<li class="li-item" v-for="(item, index) in listData" :key="index"> <li class="li-item" v-for="(item, index) in listData" :key="index">
<img :src="item" alt="" /> <img :src="item" alt="" />
<!-- {{ item }} -->
</li> </li>
</ul> </ul>
</div> </vue-seamless-scroll>
</vue-seamless-scroll> <vue-seamless-scroll
:data="listData2"
:class-option="classOption"
class="warp"
>
<ul class="ul-item">
<li class="li-item" v-for="(item, index) in listData2" :key="index">
<img :src="item" alt="" />
</li>
</ul>
</vue-seamless-scroll>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -486,27 +496,11 @@ export default {
}, },
data() { data() {
return { return {
listData: [ listData: [img1, img3, img5, img7, img9, img11, img13, img15, img1],
img1, listData2: [img2, img4, img6, img8, img10, img12, img14, img16, img1],
img2,
img3,
img4,
img5,
img6,
img7,
img8,
img9,
img10,
img11,
img12,
img13,
img14,
img15,
img16
],
classOption: { classOption: {
step: 0.2, step: 1,
limitMoveNum: 10, limitMoveNum: 8,
direction: 2 direction: 2
}, },
bannerList: [], bannerList: [],
@ -577,9 +571,8 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.warp { .warp {
// width: 144px * 8; width: 144px * 8;
width: 100%; height: 70px;
height: 140px;
margin: 0 auto; margin: 0 auto;
overflow: hidden; overflow: hidden;
ul { ul {
@ -587,18 +580,9 @@ export default {
padding: 0; padding: 0;
margin: 0 auto; margin: 0 auto;
&.ul-item { &.ul-item {
text-align: center;
display: flex; display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 10px;
padding: 10px 0;
.li-item { .li-item {
// width: 144px; width: 144px;
width: 12%;
height: 70px;
// line-height: 120px;
// background-color: #999;
color: #fff; color: #fff;
text-align: center; text-align: center;
font-size: 30px; font-size: 30px;