首页更改

This commit is contained in:
朱菊兰 2022-11-03 14:21:07 +08:00
parent 17d4befd54
commit 00071dddee
9 changed files with 37 additions and 20 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 183 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.5 MiB

After

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 29 KiB

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 29 KiB

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 29 KiB

View File

@ -1,21 +1,25 @@
<template> <template>
<div class="choicepart-container"> <div id="container" class="choicepart-container">
<div class="choicepat-navbar"> <div class="choicepat-navbar">
<navbar :showhome="false" :show-title="true" /> <navbar :showhome="false" :show-title="true" />
</div> </div>
<div class="choicepart-box"> <div class="choicepart-box" :style="{ width: 1585 * beilv + 'px' }">
<div <div
v-for="(item, index) in moduleList" v-for="(item, index) in moduleList"
:key="item.path" :key="item.path"
class="choicepart-item" class="choicepart-item"
:style="{ width: 180 * beilv + 'px', height: 223 * beilv + 'px', margin: 40 * beilv + 'px' }"
@click="handelClick(item, index)" @click="handelClick(item, index)"
> >
<div class="choicepart-item-border"> <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>
<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> </div>
<div class="bottom-img">
<img :src="require('../../assets/img/choicepart/choicepart-back-u.png')" alt="">
</div>
</div> </div>
</template> </template>
@ -28,10 +32,19 @@ export default {
components: { Navbar }, components: { Navbar },
data() { data() {
return { return {
beilv: 1,
moduleList: [] moduleList: []
} }
}, },
mounted() { 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() this.getModuleList()
const path = location.href const path = location.href
if (path.indexOf('?') !== -1) { if (path.indexOf('?') !== -1) {
@ -75,41 +88,38 @@ export default {
.choicepart-container { .choicepart-container {
min-width: 100%; min-width: 100%;
min-height: 100vh; 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: url('../../assets/img/choicepart/choicepart-back.png') repeat;
background-size: cover; background-size: cover;
overflow-x: auto; overflow-x: auto;
.choicepart-box { .choicepart-box {
width: 1585px; // width: 1585px;
margin: 0 auto; margin: 0 auto;
padding-top: 25vh; padding-top: 25vh;
.choicepart-item { .choicepart-item {
display: inline-block; display: inline-block;
width: 180px; // width: 180px;
height: 223px; // height: 223px;
margin: 40px; // margin: 40px;
background: url('../../assets/img/choicepart/choice-item-back.png') no-repeat; background: url('../../assets/img/choicepart/choice-item-back.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
// border: 1px dashed #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
top: 0; top: 0;
border-radius: 5px; border-radius: 5px;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
img { img {
width: 90px; // width: 90px;
height: 99px; // height: 90px;
position: absolute; position: absolute;
top: 32px; // top: 32px;
left: 43px; // left: 43px;
} }
.choicepart-item-border { .choicepart-item-border {
height: 100%; height: 100%;
border-radius: 5px; border-radius: 5px;
padding: 0 5px; padding: 0 5px;
line-height: 32px; // line-height: 32px;
font-size: 28px; // font-size: 28px;
font-weight: lighter; font-weight: lighter;
color: #2c6bd8; color: #2c6bd8;
overflow: hidden; overflow: hidden;
@ -125,9 +135,9 @@ export default {
right: 2px; right: 2px;
text-align: center; text-align: center;
color: #fff; color: #fff;
font-size: 16px; // font-size: 16px;
line-height: 40px; // line-height: 40px;
height: 40px; // height: 40px;
letter-spacing: 2px; letter-spacing: 2px;
background-color: rgba($color: #0b58ff, $alpha: 0.45); background-color: rgba($color: #0b58ff, $alpha: 0.45);
} }
@ -145,6 +155,13 @@ export default {
right: 0; right: 0;
z-index: 10; z-index: 10;
} }
.bottom-img {
img {
width: 100%;
position: fixed;
bottom: 0;
}
}
} }
::-webkit-scrollbar-track-piece { ::-webkit-scrollbar-track-piece {
// //