|
|
@@ -1,21 +1,25 @@ |
|
|
|
<template> |
|
|
|
<div class="choicepart-container"> |
|
|
|
<div id="container" class="choicepart-container"> |
|
|
|
<div class="choicepat-navbar"> |
|
|
|
<navbar :showhome="false" :show-title="true" /> |
|
|
|
</div> |
|
|
|
<div class="choicepart-box"> |
|
|
|
<div class="choicepart-box" :style="{ width: 1585 * beilv + 'px' }"> |
|
|
|
<div |
|
|
|
v-for="(item, index) in moduleList" |
|
|
|
:key="item.path" |
|
|
|
class="choicepart-item" |
|
|
|
:style="{ width: 180 * beilv + 'px', height: 223 * beilv + 'px', margin: 40 * beilv + 'px' }" |
|
|
|
@click="handelClick(item, index)" |
|
|
|
> |
|
|
|
<div class="choicepart-item-border"> |
|
|
|
<img :src="require(`../../assets/img/choicepart/${item.name}.png`)" alt=""> |
|
|
|
<img :src="require(`../../assets/img/choicepart/${item.name}.png`)" alt="" :style="{ width: 90 * beilv + 'px', height: 90 * beilv + 'px', top: 35 * beilv + 'px', left: 50 * beilv + 'px' }"> |
|
|
|
</div> |
|
|
|
<div class="choicepart-item-title" :title="item.meta.title">{{ item.meta.title }}</div> |
|
|
|
<div class="choicepart-item-title" :title="item.meta.title" :style="{ height: 40 * beilv + 'px', lineHeight: 40 * beilv + 'px', fontSize: 16 * beilv + 'px' }">{{ item.meta.title }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="bottom-img"> |
|
|
|
<img :src="require('../../assets/img/choicepart/choicepart-back-u.png')" alt=""> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
@@ -28,10 +32,19 @@ export default { |
|
|
|
components: { Navbar }, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
beilv: 1, |
|
|
|
moduleList: [] |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.beilv = document.getElementById('container').offsetWidth / 1920 |
|
|
|
window.addEventListener('resize', () => { |
|
|
|
if (this.isFullScreen) { |
|
|
|
this.beilv = document.body.offsetWidth / 1920 |
|
|
|
} else { |
|
|
|
this.beilv = document.getElementById('container').offsetWidth / 1920 |
|
|
|
} |
|
|
|
}) |
|
|
|
this.getModuleList() |
|
|
|
const path = location.href |
|
|
|
if (path.indexOf('?') !== -1) { |
|
|
@@ -75,41 +88,38 @@ export default { |
|
|
|
.choicepart-container { |
|
|
|
min-width: 100%; |
|
|
|
min-height: 100vh; |
|
|
|
// background: linear-gradient(-45deg, rgb(25, 25, 200), rgb(0, 100, 200)); |
|
|
|
background: url('../../assets/img/choicepart/choicepart-back.png') repeat; |
|
|
|
background-size: cover; |
|
|
|
overflow-x: auto; |
|
|
|
.choicepart-box { |
|
|
|
width: 1585px; |
|
|
|
// width: 1585px; |
|
|
|
margin: 0 auto; |
|
|
|
padding-top: 25vh; |
|
|
|
.choicepart-item { |
|
|
|
display: inline-block; |
|
|
|
width: 180px; |
|
|
|
height: 223px; |
|
|
|
margin: 40px; |
|
|
|
// width: 180px; |
|
|
|
// height: 223px; |
|
|
|
// margin: 40px; |
|
|
|
background: url('../../assets/img/choicepart/choice-item-back.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
// border: 1px dashed #fff; |
|
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); |
|
|
|
top: 0; |
|
|
|
border-radius: 5px; |
|
|
|
overflow: hidden; |
|
|
|
cursor: pointer; |
|
|
|
position: relative; |
|
|
|
img { |
|
|
|
width: 90px; |
|
|
|
height: 99px; |
|
|
|
// width: 90px; |
|
|
|
// height: 90px; |
|
|
|
position: absolute; |
|
|
|
top: 32px; |
|
|
|
left: 43px; |
|
|
|
// top: 32px; |
|
|
|
// left: 43px; |
|
|
|
} |
|
|
|
.choicepart-item-border { |
|
|
|
height: 100%; |
|
|
|
border-radius: 5px; |
|
|
|
padding: 0 5px; |
|
|
|
line-height: 32px; |
|
|
|
font-size: 28px; |
|
|
|
// line-height: 32px; |
|
|
|
// font-size: 28px; |
|
|
|
font-weight: lighter; |
|
|
|
color: #2c6bd8; |
|
|
|
overflow: hidden; |
|
|
@@ -125,9 +135,9 @@ export default { |
|
|
|
right: 2px; |
|
|
|
text-align: center; |
|
|
|
color: #fff; |
|
|
|
font-size: 16px; |
|
|
|
line-height: 40px; |
|
|
|
height: 40px; |
|
|
|
// font-size: 16px; |
|
|
|
// line-height: 40px; |
|
|
|
// height: 40px; |
|
|
|
letter-spacing: 2px; |
|
|
|
background-color: rgba($color: #0b58ff, $alpha: 0.45); |
|
|
|
} |
|
|
@@ -145,6 +155,13 @@ export default { |
|
|
|
right: 0; |
|
|
|
z-index: 10; |
|
|
|
} |
|
|
|
.bottom-img { |
|
|
|
img { |
|
|
|
width: 100%; |
|
|
|
position: fixed; |
|
|
|
bottom: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
::-webkit-scrollbar-track-piece { |
|
|
|
//滚动条凹槽的颜色,还可以设置边框属性 |
|
|
|