Skip to content

N
national_museum_vod-H5
Commit 1ed3c27e authored by Your Name's avatar Your Name
Browse files
Options

修改导览页面

parent 9c0a1964
Hide whitespace changes
Inline Side-by-side
Showing with 169 additions and 229 deletions
src/components/borderNums.vue
View file @ 1ed3c27e
<template> <template>
<div class="dashbord-list"> <div class="dashbord-list">
<ul> <ul>
<li v-for="(item, index) in list" :key="index"> <li v-for="(item, index) in list" :key="index">
<img :src="getImg(item.urlName)" alt="" /> <img :src="getImg(item.urlName)" alt="" />
<div class="title"> <div class="title">
<div class="title-name">{{ item.label }}</div> <div class="title-name">{{ item.label }}</div>
<span> <span>
<a class="num">{{ item.num || 0 }}</a> <a class="num">{{ item.num || 0 }}</a>
<a class="unit">{{ item.unit }}</a> <a class="unit">{{ item.unit }}</a>
</span> </span>
</div> </div>
</li> </li>
</ul> </ul>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: "nums", name: "nums",
data() { data() {
return { return {
data: [ data: [
{ {
label: "总播放量", label: "总播放量",
num: 0, num: 0,
unit: "次", unit: "次",
urlName: "play", urlName: "play",
feild: "playCnt", feild: "playCnt",
}, },
{ {
label: "单位组织", label: "单位组织",
num: 0, num: 0,
unit: "家", unit: "家",
urlName: "org", urlName: "org",
feild: "orgCnt", feild: "orgCnt",
}, },
{ {
label: "展板总量", label: "展板总量",
num: 0, num: 0,
unit: "个", unit: "个",
urlName: "boardsTotal", urlName: "boardsTotal",
feild: "boardCnt", feild: "boardCnt",
}, },
{ {
label: "互动总量", label: "互动总量",
num: 0, num: 0,
unit: "次", unit: "次",
urlName: "interaction", urlName: "interaction",
feild: "interactionCnt", feild: "interactionCnt",
}, },
], ],
list: [], list: [],
}; };
}, },
props: ["areaCode"], props: ["areaCode"],
mounted() { mounted() {
this.getList(); this.getList();
}, },
methods: { methods: {
getImg(imgUrl) { getImg(imgUrl) {
return require("@/assets/images/screen/" + imgUrl + ".png"); return require("@/assets/images/screen/" + imgUrl + ".png");
}, },
getList() { getList() {
this.$shttp({ this.$shttp({
method: "post", method: "post",
url: `tBoardStatistic/getBoardSurvey?areaCode=${this.areaCode}`, url: `tBoardStatistic/getBoardSurvey?areaCode=${this.areaCode}`,
authType: this.backToken, authType: this.backToken,
}) })
.then((res) => { .then((res) => {
if (res.status == 200) { // console.log(res.data.data)
if (res.data.resultCode == 200) { if (res.status == 200) {
let resData = res.data.data; if (res.data.resultCode == 200) {
this.list = [...this.data].map((v) => { let resData = res.data.data;
v["num"] = resData[v["feild"]]; this.list = [...this.data].map((v) => {
return v; v["num"] = resData[v["feild"]];
}); return v;
} else { });
this.list = [...this.data]; } else {
} this.list = [...this.data];
} else { }
this.list = [...this.data]; } else {
} this.list = [...this.data];
}) }
.catch((err) => { })
this.$message.error(err.message); .catch((err) => {
}); this.$message.error(err.message);
}, });
}, },
watch: { },
areaCode() { watch: {
this.getList(); areaCode() {
}, this.getList();
}, },
}; },
</script> };
</script>
<style lang=scss>
.dashbord-list { <style lang=scss>
width: 100%; .dashbord-list {
position: absolute; width: 100%;
top: -0.3rem; position: absolute;
ul { top: -0.3rem;
display: flex; ul {
font-size: 0; display: flex;
justify-content: space-around; font-size: 0;
li { justify-content: space-around;
position: relative; li {
} position: relative;
img { }
width: 1.76rem; img {
} width: 1.76rem;
.title { }
position: absolute; .title {
right: 0.2rem; position: absolute;
bottom: 0; right: 0.2rem;
color: rgba(78, 255, 253, 1); bottom: 0;
p { color: rgba(78, 255, 253, 1);
margin: 0; p {
padding: 0; margin: 0;
} padding: 0;
.title-name { }
font-size: 0.18rem; .title-name {
margin-bottom: 0.13rem; font-size: 0.18rem;
} margin-bottom: 0.13rem;
.num { }
font-size: 0.28rem; .num {
} font-size: 0.28rem;
.unit { }
font-size: 0.16rem; .unit {
margin-left: 0.05rem; font-size: 0.16rem;
} margin-left: 0.05rem;
} }
} }
} }
</style> }
</style>
src/views/guide.vue
View file @ 1ed3c27e
<template> <template>
<div class="login-container"> <div class="page">
<div class="login-bg"></div> <div class="container">
<div class="login-page"> <div class="container-bg">展板导览</div>
<div class="login-page-body"> <div class="container-page">
<div class="login-page-title">展板导览</div>
<div class="login-page-form">
<van-cell-group> <van-cell-group>
<van-field label="展板名称：" v-model="panelName" readonly /> <van-field label="展板名称：" style="margin: 50px 10px;font-size:18px;" v-model="panelName" readonly />
</van-cell-group> </van-cell-group>
<van-row> <van-row>
<van-col span="8" style="margin-top: 50px;"><div style="vertical-align:middle;font-size:14px;">展板导览视频：</div></van-col> <van-col span="8" style="margin: 50px 25px;"><div style="vertical-align:middle;font-size:18px;">展板导览视频：</div></van-col>
<van-col span="12"> <!-- <embed type="video/mp4" :src="panelVideo" /> --> <van-col span="12">
<video <!-- <embed type="video/mp4" :src="panelVideo" /> -->
placeholder="展板导览视频" controls <video controls width="150px" height="100px">
width="150px" <source :src="panelVideo" type="video/mp4" />
height="100px"> <source :src="panelVideo" type="video/WebM">
<source :src="panelVideo" type="video/mp4" /> </video>
<source :src="panelVideo" type="video/WebM"> </van-col>
</video></van-col>
</van-row> </van-row>
</div> </div>
</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -61,7 +57,7 @@ export default { ...@@ -61,7 +57,7 @@ export default {
initData() { initData() {
let vm = this let vm = this
let param = { let param = {
id: this.panelId, videoId: this.panelId,
}; };
vm.$https( vm.$https(
{ {
...@@ -78,82 +74,25 @@ export default { ...@@ -78,82 +74,25 @@ export default {
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.login-container { .page{
width: 100%; width: 100vw;
height: 100%; height: 100vh;
max-width: 1280px; .container {
.login-bg { width: 100vw;
width: 100%; height: 100vh;
height: 100%; .container-page {
margin: 0 auto; font-size: 18px;
background: #776d6e; width: 90vw;
&:before { height: 90vh;
display: inline-block; margin: 70px auto 0 auto;
content: "";
width: 100%;
height: 106px;
// background: url("~@/assets/images/topBox/bg-bottom.png") no-repeat;
background-size: 100% 100%;
position: absolute;
bottom: 0;
left: 0;
}
&:after {
display: inline-block;
content: "";
width: 100%;
height: 421px;
// background: url("~@/assets/images/topBox/bg-top.png") no-repeat;
background-size: 100% 100%;
position: absolute;
top: 0;
left: 0;
}
}
.login-page {
height: 580px;
position: absolute;
bottom: 20px;
left: 24px;
right: 24px;
padding: 24px;
background: #f5f5f5;
box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.2);
border-radius: 8px;
.login-page-form {
padding-top: 24px;
.van-field {
background: #f5f5f5;
border-radius: 4px;
margin-bottom: 32px;
.van-field__left-icon {
margin-right: 12px;
}
} }
} .container-bg{
.login-page-title { font-size: 20px;
font-size: 18px; color: #333;
color: #333; text-align: center;
text-align: center; margin: 24px 0;
margin: 24px 0;
}
.login-page-button {
text-align: center;
background: #a4151d;
border-radius: 4px;
position: absolute;
bottom: 40px;
left: 24px;
right: 24px;
box-sizing: border-box;
.van-button {
font-size: 16px;
color: #fff;
background-color: transparent;
border: none;
} }
} }
} }
}
</style> </style>
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