Skip to content

A
antaile-web
Commit c478382a by wangyalan-git
Options

bug修改

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