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