Skip to content

A
antaile-web
Commit c478382a by wangyalan-git
Options

bug修改

parent 00610067
Showing with 104 additions and 70 deletions
src/assets/js/script.js
......@@ -14,6 +14,7 @@ class Example {
direction: "horizontal",
smooth: true,
lerp: 0.05,
setHtmlTag: false,
tablet: {
smooth: true,
},
......@@ -50,5 +51,8 @@ class Example {
setTimeout(this.showImages.bind(this), 2000);
}
destroy(){
this.scroll.destroy()
}
}
export default Example;
src/assets/styles/style.css
......@@ -3,9 +3,6 @@ body {
height: 100%;
background: #eee;
}
body {
overflow: hidden;
}
.scroll-animations-example > .scrollsection {
padding: 10vh 10vh 10vh 10vmax;
min-width: 550vh;
......
src/components/PreviewModal/index.vue
<template>
<el-dialog :visible.sync="visible" :title="title" center width="80%">
<el-dialog :visible.sync="visible" :title="title" center width="75%" append-to-body>
<div class="container">
<div class="show-flex">
<div class="show-preview">
......@@ -25,21 +25,23 @@
<div class="show-recommend">
<p>推荐浏览</p>
<div class="show-list">
<router-link
:to="{ path: '/preview', query: { id: item.id } }"
<img
v-for="(item, index) in list"
:key="index"
>
<img :src="item.coverUrl" alt="" />
</router-link>
:src="item.coverUrl"
alt=""
@click="showPreviewModal(item)"
/>
</div>
</div>
</div>
</div>
</div>
<preview-modal ref="previewModal"></preview-modal>
</el-dialog>
</template>
<script>
import PreviewModal from "@/components/PreviewModal";
import viwModal from "@/components/viwModal";
import QRCode from "qrcodejs2"; // 引入插件
import {
......@@ -53,6 +55,7 @@ export default {
name: "PreviewModal",
components: {
viwModal,
PreviewModal,
},
data() {
return {
......@@ -133,21 +136,17 @@ export default {
this.list = res.data;
});
},
submit() {
// 提交保存
this.$refs.refuseForm.validate((valid) => {
if (valid) {
// 验证通过
this.loading = true;
// updateMemberPhone(this.model).then(res => {
// this.loading = false
// this.$emit('ok')
// this.close()
// }).catch(err => {
// this.loading = false
// })
}
});
showPreviewModal(item) {
this.$refs.previewModal.show(item.id);
this.visible = false
// if (item.device == 1) {
// this.$refs.previewModal.show(item.id);
// } else {
// this.$router.push({
// path: "/preview",
// query: { id: item.id },
// });
// }
},
close() {
this.$emit("close");
......@@ -205,11 +204,11 @@ export default {
align-items: center;
margin-right: 3%;
color: #666;
font-size: 14px;
font-size: 12px;
.qrcode {
width: 100px;
height: 100px;
width: 120px;
height: 120px;
padding: 10px;
background: #fff;
margin-bottom: 10px;
......@@ -239,13 +238,12 @@ export default {
}
.show-list {
display: flex;
> a {
img {
width: 100%;
width: 150px;
margin: 10px;
border-radius: 10px;
img {
width: 100%;
}
}
}
}
......
src/views/AppPage/index.vue
......@@ -74,7 +74,7 @@ export default {
// font-weight: bold;
z-index: 1;
text-align: center;
padding: 15% 0 50px;
// padding: 15% 0 50px;
font-size: 50px;
color: #fff;
box-sizing: border-box;
......
src/views/Home/index.vue
......@@ -482,7 +482,7 @@ export default {
color: #fff;
box-sizing: border-box;
letter-spacing: 10px;
line-height: 75px;
line-height: 70px;
> p {
display: flex;
align-items: center;
......@@ -492,6 +492,7 @@ export default {
font-size: 16px;
color: #cccccc;
letter-spacing: 3px;
line-height: 40px;
// margin-top: 10px;
}
}
......
src/views/Preview/index.vue
......@@ -18,7 +18,7 @@
<div class="qrcode" id="qrcode" ref="qrcode"></div>
手机扫码观看
</div>
<div style="flex: 1;">
<div style="flex: 1">
<p class="show-title">{{ detail.aboutName || "" }}</p>
<p class="show-subtitle">
{{ detail.name || "" }}
......@@ -28,23 +28,25 @@
<div class="show-recommend">
<p>推荐浏览</p>
<div class="show-list">
<router-link
:to="{ path: '/preview', query: { id: item.id } }"
<img
v-for="(item, index) in list"
:key="index"
>
<img :src="item.coverUrl" alt="" />
</router-link>
:src="item.coverUrl"
alt=""
@click="showPreviewModal(item)"
/>
</div>
</div>
</el-col>
</el-row>
</div>
<custom-footer></custom-footer>
<preview-modal ref="previewModal"></preview-modal>
</div>
</template>
<script>
import PreviewModal from "@/components/PreviewModal";
import viwModal from "@/components/viwModal";
import QRCode from "qrcodejs2"; // 引入插件
import {
......@@ -57,6 +59,7 @@ export default {
name: "login",
components: {
viwModal,
PreviewModal,
},
data() {
return {
......@@ -72,6 +75,18 @@ export default {
this.init(this.$route.query.id);
},
methods: {
showPreviewModal(item) {
this.$refs.previewModal.show(item.id);
this.visible = false;
// if (item.device == 1) {
// this.$refs.previewModal.show(item.id);
// } else {
// this.$router.push({
// path: "/preview",
// query: { id: item.id },
// });
// }
},
init(id) {
console.log("id", id);
if (id) {
......@@ -86,8 +101,8 @@ export default {
},
qrcode() {
new QRCode("qrcode", {
width: 200, // 设置宽度，单位像素
height: 200, // 设置高度，单位像素
width: 120, // 设置宽度，单位像素
height: 120, // 设置高度，单位像素
colorLight: "#fff",
text: this.webUrl, // 设置二维码内容或跳转地址
});
......@@ -145,7 +160,7 @@ export default {
.container {
width: 100%;
margin: 0 auto;
padding: 10% calc((100% - 1200px) / 2);
padding: 10% calc((100% - 1150px) / 2);
background: url("~@/assets/images/Exhibitionbg.png") no-repeat;
background-size: 100% 100%;
box-sizing: border-box;
......@@ -180,12 +195,12 @@ export default {
align-items: center;
margin-right: 3%;
color: #666;
font-size: 14px;
font-size: 12px;
.qrcode {
width: 200px;
height: 200px;
padding: 20px;
width: 120px;
height: 120px;
padding: 10px;
background: #fff;
margin-bottom: 10px;
}
......@@ -193,7 +208,7 @@ export default {
.show-title {
color: #5d6063;
font-size: 30px;
font-size: 18px;
font-weight: bold;
margin-bottom: 20px;
}
......@@ -202,7 +217,7 @@ export default {
color: #666666;
line-height: 36px;
letter-spacing: 2px;
font-size: 24px;
font-size: 14px;
}
}
.show-recommend {
......@@ -214,13 +229,11 @@ export default {
}
.show-list {
display: flex;
> a {
width: 200px;
img {
width: 150px;
margin: 10px;
border-radius: 10px;
img {
width: 100%;
}
}
}
}
......
src/views/TimePeriod/index.vue
......@@ -5,37 +5,42 @@
<div class="scrollsection" data-scroll-section>
<!-- "item -normal" "item -big" "item -small -horizontal" "item -small" "item -normal -horizontal" "item -big -horizontal" -->
<div
:class="classRandom(1, 6)"
:class="classRandom(1, 4)"
data-scroll
:data-scroll-speed="random(1, 4)"
v-for="(item, index) in list"
:key="index"
>
<router-link :to="{path: '/preview',query: {id: item.id}}" class="image"
><img :src="item.coverUrl"
/></router-link>
<div class="image" @click="showPreviewModal(item)">
<img :src="item.coverUrl" />
</div>
</div>
</div>
</div>
<custom-footer></custom-footer>
<preview-modal ref="previewModal"></preview-modal>
</div>
</template>
<script>
import PreviewModal from "@/components/PreviewModal";
import Example from "@/assets/js/script.js";
import { selectOfficialWebsiteAtlTime } from "@/api/index";
export default {
name: "login",
components: {
PreviewModal,
},
data() {
return {
list: [],
classList: [
"item -normal",
"item -big",
// "item -big",
"item -small -horizontal",
"item -small",
"item -normal -horizontal",
"item -big -horizontal",
// "item -big -horizontal",
],
};
},
......@@ -44,6 +49,18 @@ export default {
},
mounted() {},
methods: {
showPreviewModal(item) {
this.$refs.previewModal.show(item.id);
this.visible = false;
// if (item.device == 1) {
// this.$refs.previewModal.show(item.id);
// } else {
// this.$router.push({
// path: "/preview",
// query: { id: item.id },
// });
// }
},
random(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
},
......@@ -53,26 +70,30 @@ export default {
},
selectOfficialWebsiteAtlTime() {
selectOfficialWebsiteAtlTime({ page: { pageNum: 1, pageSize: 20 } }).then(
(res) => {
console.log(res);
this.list = res.data.list;
this.$nextTick(() => {
new Example({
root: document.querySelector(".scroll-animations-example"),
});
selectOfficialWebsiteAtlTime({
page: { pageNum: 1, pageSize: 100 },
}).then((res) => {
console.log(res);
this.list = res.data.list;
this.$nextTick(() => {
this.Example = new Example({
root: document.querySelector(".scroll-animations-example"),
});
}
);
});
});
},
},
destroyed() {
this.Example.destroy();
document.body.style.overflow = "none";
},
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "~@/assets/styles/normalize.min.css";
@import "~@/assets/styles/style.css";
@import "~@/assets/styles/locomotive-scroll.min.css";
.show-container{
.show-container {
background: url("~@/assets/images/Flashscreenbg.png") no-repeat;
background-size: 100% 100%;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment