增加优化兼容IE的代码

This commit is contained in:
lVAL 2020-09-30 14:07:45 +08:00
parent c8c47be2fd
commit d27966d4f5
16 changed files with 146 additions and 71 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 69 KiB

View File

@ -0,0 +1,23 @@
import image1 from "./1.jpg";
import image2 from "./2.jpg";
import image3 from "./3.jpg";
import image4 from "./4.jpg";
export default {
Act1: {
name: "西铁院",
src: image1
},
Act2: {
name: "上海轨道交通展",
src: image2
},
Act3: {
name: "第四届“中国创翼”暨“创业北京”创业创新大赛",
src: image3
},
Act4: {
name: "创业宝鸡星耀钛谷中小企业科技创新创业大赛",
src: image4
}
};

View File

@ -1,5 +1,5 @@
<template>
<router-link :to="home" class="logo animate__animated animate__heartBeat">
<router-link :to="home" class="logo">
<el-image style="width:40px; height:40px" :src="logo" />
<h2>北京玖琏科技有限公司</h2>
</router-link>

View File

@ -1,5 +1,7 @@
<template>
<div class="announce animate__animated animate__bounceIn"></div>
<div
class="announce animate__animated animate__bounceIn animate__faster"
></div>
</template>
<script>
import { Notification } from "element-ui";
@ -30,7 +32,7 @@ export default {
duration: 0,
position: "top-right",
dangerouslyUseHTMLString: true,
customClass: "notify animate__animated animate__fadeInTopRight",
customClass: "notify",
message
});
}

View File

@ -9,7 +9,7 @@
type="card"
:interval="5000"
arrow="always"
height="550px"
height="480px"
>
<el-carousel-item v-for="(el, i) in imageList" :key="i">
<router-link to="/honor">
@ -89,6 +89,7 @@ export default {
.carousel {
overflow: hidden;
vertical-align: middle;
}
}
</style>

View File

@ -13,11 +13,7 @@
:key="i"
@click="goLinkPage(el, i)"
>
<el-image
:src="el.src"
style="width:100%;height:460px;"
fit="cover"
/>
<el-image :src="el.src" style="width:100%;height:auto;" fit="cover" />
<div
class="type"
:style="{
@ -124,6 +120,7 @@ a {
float: none !important;
max-width: 80%;
font-size: 1.9em;
&::after {
content: "";
width: 100%;
@ -150,10 +147,6 @@ a {
border: 1px solid #e4e7ed;
&:hover {
// /deep/ img {
// transition: all 0.5s;
// transform: scale(1.1);
// }
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
}
@ -195,6 +188,10 @@ a {
padding: 20px;
text-align: left;
color: #fff;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
.describe {
display: block;

View File

@ -4,12 +4,14 @@
<h2>{{ title }}</h2>
</div>
<div class="container">
<el-card shadow="never" style="margin-bottom: 30px">
<el-card shadow="never" style="margin-bottom:30px">
<div slot="header" class="clearfix" style="text-align:left">
<span>精彩视频</span>
</div>
<div class="grid">
<div class="flex">
<div
class="item"
style="flex:1;min-width:460px"
v-for="(el, i) in videoList"
:key="i"
@click="goLinkPage"
@ -19,7 +21,7 @@
}"
>
<iframe
style="width: 100%;height: 460px;"
style="width:calc(100% - 10px);height:420px"
:src="el.source"
scrolling="no"
border="0"
@ -35,16 +37,12 @@
<span>精彩图集</span>
</div>
<div class="grid">
<div v-for="(el, i) in imagesList" :key="i">
<div v-for="(el, i) in imagesList" :key="i" class="item">
<div class="info-box">
<h3>{{ el.name }}</h3>
</div>
<router-link :to="`/preview/image?id=${i}`">
<el-image
lazy
style="width:100%; height:480px"
:src="buildUrl(el.src)"
/>
<el-image lazy style="width:100%;height:auto" :src="el.src" />
</router-link>
</div>
</div>
@ -56,7 +54,7 @@
<script>
import eButtonGroup from "@/components/eButtonGroup/index.vue";
import thumbnail from "@/assets/images/thumbnail";
import images from "@/assets/images/picture";
import { buildUrl } from "@/utils/resourceUrl";
export default {
@ -92,7 +90,7 @@ export default {
];
},
imagesList() {
return Object.values(thumbnail);
return Object.values(images);
},
buttonList() {
return [
@ -156,7 +154,21 @@ a {
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 30px 30px;
grid-gap: 20px 20px;
.item {
width: 100%;
}
}
.flex {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
box-sizing: border-box;
.item {
margin-bottom: 20px;
}
}
.recommend {

View File

@ -3,7 +3,7 @@
<div class="container">
<article id="knowledge">
<h2 style="background:yellowgreen;">知识产权</h2>
<div class="gird">
<div class="flex">
<el-card
class="image"
shadow="hover"
@ -11,18 +11,14 @@
:key="i"
>
<a target="_blank" :href="buildUrl(el.src)">
<el-image
:src="buildUrl(el.src)"
lazy
style="width: 100%;height:560px"
/>
<el-image :src="buildUrl(el.src)" class="image-knowledge" />
</a>
</el-card>
</div>
</article>
<article id="honor">
<h2 style="background:crimson;">&ensp;&ensp;</h2>
<div class="gird">
<div class="flex">
<el-card
class="image"
shadow="hover"
@ -30,11 +26,7 @@
:key="i"
>
<a target="_blank" :href="buildUrl(el.src)">
<el-image
:src="buildUrl(el.src)"
lazy
style="width: 100%;height:300px;"
/>
<el-image :src="buildUrl(el.src)" lazy class="image-honor" />
</a>
</el-card>
</div>
@ -100,11 +92,49 @@ export default {
padding: 12px 0;
}
.gird {
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 30px 30px;
margin-bottom: 70px;
.image {
display: block;
&-knowledge {
width: 415px !important;
height: 560px !important;
}
&-honor {
width: 415px !important;
height: 300px !important;
}
}
}
.flex {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
box-sizing: border-box;
.image {
display: block;
margin-bottom: 20px;
&-knowledge {
display: block;
width: 415px !important;
height: 564px !important;
}
&-honor {
display: block;
width: 415px !important;
height: 293px !important;
}
}
}
}
}

View File

@ -29,11 +29,20 @@
<router-link v-if="el.href" :to="el.href">
{{ el.name }}
</router-link>
<el-image
style="width:100px;height:100px"
<el-popover
v-else-if="el.src"
placement="top"
width="200"
trigger="hover"
>
<el-image style="width:100%;height:100%;" :src="el.src" />
<el-image
slot="reference"
style="width:80px;height:80px"
:src="el.src"
/>
</el-popover>
</li>
</ul>
</div>
@ -43,9 +52,7 @@
<div class="title">合作方</div>
<ul class="list-unstyled share">
<li v-for="(el, i) in images" :key="i">
<router-link :to="el.href">
<el-image style="width:80px;height:80px;" :src="el.src" />
</router-link>
</li>
</ul>
</div>

View File

@ -74,7 +74,6 @@ export default {
a {
padding: 0 20px;
margin: 0 10px;
text-decoration: none;
color: #333333;
display: block;

View File

@ -124,22 +124,23 @@ export default {
display: flex;
justify-content: space-between;
align-items: center;
.center {
}
flex-wrap: wrap;
.left {
border: none;
position: absolute;
top: 0;
left: 30px;
left: 0px;
float: left;
font-size: 0.9375em;
display: flex;
align-items: center;
width: 360px;
width: 300px;
height: 100%;
}
.center {
}
}
}

View File

@ -68,29 +68,26 @@ export default {
top: 0;
width: 100%;
height: calc(100% - 80px);
overflow-x: auto;
.layer {
width: 1500px;
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: center;
margin: auto;
.main {
flex: 1;
height: 100%;
.el-carousel {
height: 100%;
/deep/ .el-carousel__container {
height: 100% !important;
}
.el-image {
width: 100%;
height: 100%;
}
}
.main {
flex: 1;
height: 100%;
}
.side {

View File

@ -1,7 +1,7 @@
<template>
<div class="pdf" v-show="fileType === 'pdf'">
<div class="pdf">
<template v-for="i in numPages">
<pdf class="page" :src="src" :page="i" :key="i" />
<pdf class="page" v-loading="loading" :src="src" :page="i" :key="i" />
</template>
</div>
</template>
@ -17,7 +17,7 @@ export default {
data() {
return {
numPages: 0,
fileType: "pdf"
loading: false
};
},
computed: {
@ -26,8 +26,14 @@ export default {
}
},
mounted() {
this.src.promise.then(pdf => {
this.loading = true;
this.src.promise
.then(pdf => {
this.numPages = pdf.numPages;
this.loading = false;
})
.catch(() => {
this.loading = false;
});
}
};