|
@@ -8,6 +8,7 @@
|
|
|
<!-- <img :src="title" v-else /> -->
|
|
|
</div>
|
|
|
<div class="horHead-left">
|
|
|
+ <div class="CBIClass">塑美尚格</div>
|
|
|
<img
|
|
|
:src="logo"
|
|
|
alt=""
|
|
@@ -20,7 +21,26 @@
|
|
|
</div>
|
|
|
<div class="right-item">{{ weatherCont.text }}</div>
|
|
|
<div
|
|
|
- class="right-item"
|
|
|
+ class="right-item button-wrap" style="display:none;"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ class="controlImg"
|
|
|
+ alt=""
|
|
|
+ src="@/assets/image/horImg/lastbutton.svg" @click="toLast"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ class="controlImg"
|
|
|
+ alt=""
|
|
|
+ :src="stopSign?playbutton:stopbutton" @click="toPlayStop"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ class="controlImg"
|
|
|
+ alt=""
|
|
|
+ src="@/assets/image/horImg/nextButton.svg" @click="toNext"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="right-item button-wrap"
|
|
|
@click="changeScreen"
|
|
|
>
|
|
|
<img
|
|
@@ -29,18 +49,6 @@
|
|
|
:src="nowScreen == 'vertical' ? changeHor : changeVer"
|
|
|
/>
|
|
|
</div>
|
|
|
- <div
|
|
|
- class="right-item showButton" @click="toPlay"
|
|
|
- >播放</div>
|
|
|
- <div
|
|
|
- class="right-item showButton" @click="toStop"
|
|
|
- >暂停</div>
|
|
|
- <div
|
|
|
- class="right-item showButton" @click="toLast"
|
|
|
- >上一页</div>
|
|
|
- <div
|
|
|
- class="right-item showButton" @click="toNext"
|
|
|
- >下一页</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -60,22 +68,39 @@ export default defineComponent({
|
|
|
},
|
|
|
},
|
|
|
setup(props, contx) {
|
|
|
- const { persagyLogo, zhijiangLogo, changeHor, changeVer } = dapingImage;
|
|
|
+ const {
|
|
|
+ CBILogo,
|
|
|
+ persagyLogo,
|
|
|
+ zhijiangLogo,
|
|
|
+ changeHor,
|
|
|
+ changeVer,
|
|
|
+ playbutton,
|
|
|
+ stopbutton,
|
|
|
+ } = dapingImage;
|
|
|
|
|
|
const route: any = useRoute();
|
|
|
const router = useRouter();
|
|
|
const projectStore = useProjectStore();
|
|
|
|
|
|
- const { weatherCont, projectObj, projectId } = storeToRefs(projectStore);
|
|
|
+ const { weatherCont, projectObj, projectId, stopSign } = storeToRefs(
|
|
|
+ projectStore
|
|
|
+ );
|
|
|
|
|
|
const allData = reactive({
|
|
|
// logo: new URL(
|
|
|
// "../assets/image/horImg/zhijianglogo.png",
|
|
|
// import.meta.url
|
|
|
// ).href,
|
|
|
- logo: projectId == "Pj3301100002" ? zhijiangLogo : persagyLogo,
|
|
|
+ logo:
|
|
|
+ projectStore.projectId == "Pj3301100002"
|
|
|
+ ? zhijiangLogo
|
|
|
+ : projectStore.projectId == "Pj1101010007"
|
|
|
+ ? CBILogo
|
|
|
+ : persagyLogo,
|
|
|
changeHor: changeHor,
|
|
|
changeVer: changeVer,
|
|
|
+ playbutton: playbutton,
|
|
|
+ stopbutton: stopbutton,
|
|
|
nowScreen:
|
|
|
route.path.indexOf("horiScreen") > -1 ? "horizontal" : "vertical",
|
|
|
nowStr: moment().format("YYYY.MM.DD HH:mm"),
|
|
@@ -96,28 +121,39 @@ export default defineComponent({
|
|
|
router.push({ path: "/verScreen" });
|
|
|
}
|
|
|
},
|
|
|
+ toPlayStop() {
|
|
|
+ if (projectStore.stopSign == true) {
|
|
|
+ projectStore.stopSign = false;
|
|
|
+ contx.emit("toplay");
|
|
|
+ } else {
|
|
|
+ projectStore.stopSign = true;
|
|
|
+ contx.emit("tostop");
|
|
|
+ }
|
|
|
+ },
|
|
|
toPlay() {
|
|
|
- projectStore.stopSign=false;
|
|
|
+ projectStore.stopSign = false;
|
|
|
contx.emit("toplay");
|
|
|
},
|
|
|
toStop() {
|
|
|
- debugger;
|
|
|
- projectStore.stopSign=true;
|
|
|
+ projectStore.stopSign = true;
|
|
|
contx.emit("tostop");
|
|
|
},
|
|
|
toLast() {
|
|
|
+ // class="[stopSign?'':'disbaleImg']"
|
|
|
+ //if(!projectStore.stopSign)return;
|
|
|
contx.emit("lastpage");
|
|
|
},
|
|
|
toNext() {
|
|
|
+ //if(!projectStore.stopSign)return;
|
|
|
contx.emit("nextpage");
|
|
|
},
|
|
|
});
|
|
|
|
|
|
onMounted(() => {
|
|
|
- console.log("pagehead-mounted");
|
|
|
+ console.log("pagehead-mounted");
|
|
|
allData.setNowInterval();
|
|
|
});
|
|
|
- return { ...toRefs(allData), weatherCont, projectObj };
|
|
|
+ return { ...toRefs(allData), weatherCont, projectObj, stopSign };
|
|
|
},
|
|
|
});
|
|
|
</script>
|
|
@@ -152,6 +188,16 @@ export default defineComponent({
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
font-size: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .CBIClass {
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 25px;
|
|
|
+ color: #efdec6;
|
|
|
+ font-family: Alibaba PuHuiTi;
|
|
|
+ margin-right:10px;
|
|
|
+ font-weight:600;
|
|
|
+ }
|
|
|
}
|
|
|
.horHead-right {
|
|
|
position: absolute;
|
|
@@ -165,7 +211,6 @@ export default defineComponent({
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
- cursor: pointer;
|
|
|
// padding: 12px 16px;
|
|
|
font-size: 20px;
|
|
|
color: #efdec6;
|
|
@@ -176,20 +221,34 @@ export default defineComponent({
|
|
|
// border: 2px solid #ffffffcc;
|
|
|
box-sizing: border-box;
|
|
|
// border-radius: 8px;
|
|
|
+ .controlImg {
|
|
|
+ margin-right: 0px;
|
|
|
+ width: 34px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .disbaleImg {
|
|
|
+ opacity: 0.3;
|
|
|
+ }
|
|
|
.firstImg {
|
|
|
- margin-right: 6px;
|
|
|
+ margin-right: 10px;
|
|
|
width: 28px;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
.item-time {
|
|
|
font-family: Persagy;
|
|
|
font-weight: 400;
|
|
|
}
|
|
|
}
|
|
|
+ .button-wrap {
|
|
|
+ padding: 0 10px 0 10px;
|
|
|
+ background: rgba(100, 108, 130, 0.3);
|
|
|
+ backdrop-filter: blur(5px);
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
.showButton {
|
|
|
background: #fff;
|
|
|
padding: 5px 8px;
|
|
|
color: #4f4f4f;
|
|
|
- display:none;
|
|
|
}
|
|
|
}
|
|
|
}
|