This commit is contained in:
wangting 2024-05-29 18:02:01 +08:00
parent b343b7fed0
commit 5107d08322
10 changed files with 103 additions and 19 deletions

View File

@ -7,6 +7,7 @@
"build": "vue-cli-service build"
},
"dependencies": {
"@element-plus/icons-vue": "^2.3.1",
"axios": "^1.6.8",
"core-js": "^3.8.3",
"element-plus": "^2.7.2",

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
src/assets/images/lx-bg.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -23,7 +23,7 @@
</div>
</div>
<div class="main-img">
<el-carousel height="8.5625rem">
<el-carousel height="8.5625rem" :pause-on-hover="false">
<el-carousel-item v-for="item in imgList" :key="item">
<img :src="$baseUrl+item.path" alt="">
</el-carousel-item>

View File

@ -37,7 +37,6 @@ export default {
font-size: .25rem;
color: #505050;
line-height: .6rem;
min-height: 800px;
img{
width: 100%;
height: auto;
@ -57,9 +56,10 @@ export default {
text-align: center;
}
.back{
position: fixed;
bottom: 3.75rem;
right: 1.25rem;
display: flex;
justify-content: center;
transform: rotate(90deg);
margin-bottom: 1rem;
img{
width: 1.25rem;
height: auto;

View File

@ -67,18 +67,18 @@
<div class="list">
<div class="left">
<div class="item" v-for="(item,i) in information" @click="jumpToArticle(item.id)">
<span class="title" v-if="item.tittle.length<=25">{{item.tittle}}</span>
<span class="title" v-else>{{item.tittle.slice(0,25)}}...</span>
<span class="title" v-if="item.tittle.length<=35">{{item.tittle}}</span>
<span class="title" v-else>{{item.tittle.slice(0,35)}}...</span>
<span class="time">{{item.submitTime}}</span>
</div>
</div>
<div class="right">
<!-- <div class="right">
<div class="item" v-for="(item,i) in information.slice(0,2)" @click="jumpToArticle(item.id)">
<img :src="$baseUrl+item.img" alt="">
<div class="title" v-if="item.tittle.length>20">{{item.tittle.slice(0,20)}}...</div>
<div class="title" v-else>{{item.tittle}}</div>
</div>
</div>
</div> -->
</div>
</div>
</div>
@ -211,6 +211,7 @@
color: #333333;
line-height: .6rem;
font-family: Source Han Sans CN;
text-indent: 2em;
}
.menu{
display: flex;
@ -256,7 +257,6 @@
margin-bottom: .55rem;
position: relative;
cursor: pointer;
img{
width: 100%;
height: 100%;
@ -271,8 +271,8 @@
color: #FFFFFF;
line-height: .55rem;
font-family: Source Han Sans CN;
}
}
}
@ -303,12 +303,12 @@
}
}
.list{
margin: 0 2.375rem;
margin: 0 3.375rem;
margin-bottom: 1rem;
display: flex;
justify-content: space-between;
.left{
width: 8.25rem;
width: 100%;
.item{
width: 100%;
height: .75rem;
@ -319,12 +319,26 @@
color: #282828;
border-bottom: .0125rem solid #DADADA;
cursor: pointer;
position: relative;
&::before{
position: absolute;
content: '';
width: .125rem;
height: .125rem;
border-radius: 50%;
background-color: #e93535;
left: .0625rem;
}
&:hover{
color: #189eef;
}
&:last-child{
border: none;
}
.title{
font-size: .25rem;
margin-left: .375rem;
}
.time{
color: #666666;
font-size: .23rem;

View File

@ -1,22 +1,32 @@
<template>
<div class="page">
<div class="list">
<div class="item" v-for="(item,i) in certificate">
<img :src="$baseUrl+item.img" alt="">
<div class="item" v-for="(item,i) in certificate" @click="showImg(item)">
<img :id="item.id" :src="getUrl(item.id,$baseUrl+item.img)">
<div class="title">{{item.tittle}}</div>
</div>
</div>
<div class="preview" v-if="bigImgShow">
<img id="bigImg" :src="bigImg" alt="">
<el-icon class="icon" :size="48" color="#fff" @click="bigImgShow=false">
<CircleClose />
</el-icon>
</div>
</div>
</template>
<script>
import { CircleClose } from '@element-plus/icons-vue';
export default {
name: 'Bottom',
components: {
CircleClose
},
data(){
return{
certificate:[]
certificate:[],
bigImgShow: false,
bigImg:''
}
},
created(){
@ -29,7 +39,43 @@
this.certificate = res.data.rows
})
},
showImg(item){
this.bigImgShow = true
this.$nextTick(()=>{
const element = document.getElementById('bigImg');
this.hidePic(element,this.$baseUrl+item.img)
})
},
//
getUrl(id,url){
this.$nextTick(()=>{
const eleAppend = document.getElementById(id);
this.hidePic(eleAppend,url)
})
},
hidePic(element,url){
window.URL = window.URL || window.webkitURL
console.log(element)
if(typeof history.pushState === 'function'){
var xhr = new XMLHttpRequest()
xhr.open('get', url, true)
xhr.responseType = 'blob'
xhr.onload = function () {
if (this.status === 200) {
var blob = this.response
element.onload = function (e) {
window.URL.revokeObjectURL(element.src)
}
element.src = window.URL.createObjectURL(blob)
}
}
xhr.send()
}
},
}
}
</script>
@ -59,6 +105,27 @@
}
}
}
.preview{
position: fixed;
z-index: 999;
top: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, .5);
display: flex;
justify-content: center;
align-items: center;
img{
width: auto;
height: 80vh;
}
.el-icon{
position: absolute;
top: .5rem;
right: .8rem;
}
}
}

View File

@ -194,10 +194,11 @@
.lianxi{
width: 100%;
height: 2.5rem;
background-color: #ccc;
display: flex;
align-items: center;
padding-left: 1.625rem;
background: url('@/assets/images/lx-bg.jpg') no-repeat;
background-size: 100% 100%;
.phone,.address{
display: flex;
margin-left: .75rem;
@ -226,6 +227,7 @@
line-height: .575rem;
color: #fff;
padding-left: .375rem;
font-size: .25rem;
}

View File

@ -3,7 +3,7 @@
<div class="list">
<div class="item" v-for="item in data">
<div class="title">
<span class="position">电气工程师 </span>
<span class="position">{{item.tittle}}</span>
</div>
<div class="content">
<div class="left">