|
|
@@ -1,15 +1,17 @@
|
|
|
<template>
|
|
|
<div class="hotspot" :class="{ full: smBtn }">
|
|
|
- <!-- 毛玻璃 -->
|
|
|
- <div class="meanPageMBL"></div>
|
|
|
-
|
|
|
+ <div class="top">热点列表</div>
|
|
|
<div class="main">
|
|
|
- <h3>热点列表</h3>
|
|
|
- <div class="code">
|
|
|
- <img src="@/assets/img/code.png" alt="" />
|
|
|
- <p>保存二维码，或点击复制链接</p>
|
|
|
+ <div class="txt">
|
|
|
+ <span
|
|
|
+ :class="{ active: hotInd === index }"
|
|
|
+ @click="openHot(item, index)"
|
|
|
+ :title="item.info.title ? item.info.title : '热点'"
|
|
|
+ v-for="(item, index) in data"
|
|
|
+ :key="index"
|
|
|
+ >{{ item.info.title ? item.info.title : "热点" }}</span
|
|
|
+ >
|
|
|
</div>
|
|
|
- <div class="btnn" @click="copyPcTxt">复制分享链接</div>
|
|
|
<!-- 关闭按钮 -->
|
|
|
<div class="close" @click="$emit('close')"></div>
|
|
|
</div>
|
|
|
@@ -28,7 +30,10 @@ export default {
|
|
|
components: {},
|
|
|
data() {
|
|
|
//这里存放数据
|
|
|
- return {};
|
|
|
+ return {
|
|
|
+ data: [],
|
|
|
+ hotInd: null,
|
|
|
+ };
|
|
|
},
|
|
|
//监听属性 类似于data概念
|
|
|
computed: {},
|
|
|
@@ -36,34 +41,15 @@ export default {
|
|
|
watch: {},
|
|
|
//方法集合
|
|
|
methods: {
|
|
|
- //点击复制链接
|
|
|
- copyPcTxt() {
|
|
|
- // 存储传递过来的数据
|
|
|
- let OrderNumber = "9999999999";
|
|
|
- // 创建一个input 元素
|
|
|
- // createElement() 方法通过指定名称创建一个元素
|
|
|
- let newInput = document.createElement("input");
|
|
|
- // 讲存储的数据赋值给input的value值
|
|
|
- newInput.value = OrderNumber;
|
|
|
- // appendChild() 方法向节点添加最后一个子节点。
|
|
|
- document.body.appendChild(newInput);
|
|
|
- // 选中input元素中的文本
|
|
|
- // select() 方法用于选择该元素中的文本。
|
|
|
- newInput.select();
|
|
|
- // 执行浏览器复制命令
|
|
|
- // execCommand方法是执行一个对当前文档，当前选择或者给出范围的命令
|
|
|
- document.execCommand("Copy");
|
|
|
- // 清空输入框
|
|
|
- newInput.remove();
|
|
|
- // 下面是element的弹窗 不需要的自行删除就好
|
|
|
- this.$message({
|
|
|
- message: "复制成功",
|
|
|
- type: "success",
|
|
|
- });
|
|
|
+ openHot(e, index) {
|
|
|
+ e && e.examine(window.player, true);
|
|
|
+ this.hotInd = index;
|
|
|
},
|
|
|
},
|
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
|
- created() {},
|
|
|
+ created() {
|
|
|
+ this.data = window.myHotList;
|
|
|
+ },
|
|
|
//生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
mounted() {},
|
|
|
beforeCreate() {}, //生命周期 - 创建之前
|
|
|
@@ -77,84 +63,68 @@ export default {
|
|
|
</script>
|
|
|
<style lang='less' scoped>
|
|
|
.hotspot {
|
|
|
- transition: width 0.3s;
|
|
|
- color: #fff6d2;
|
|
|
+ width: 340px;
|
|
|
+ height: 100%;
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
- left: 0;
|
|
|
+ right: 0;
|
|
|
+ transition: all 0.3s;
|
|
|
+ transform: translateX(-200px);
|
|
|
z-index: 998;
|
|
|
- width: calc(100% - 200px);
|
|
|
- height: 100%;
|
|
|
- // m毛玻璃
|
|
|
- .meanPageMBL {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
+ .top {
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: rgba(161, 101, 59, 0.8);
|
|
|
- backdrop-filter: blur(4px);
|
|
|
- z-index: -1;
|
|
|
+ height: 100px;
|
|
|
+ line-height: 100px;
|
|
|
+ background-color: #cc946d;
|
|
|
+ color: #fff6d2;
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
.main {
|
|
|
- border-radius: 10px;
|
|
|
- padding-top: 50px;
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- width: 400px;
|
|
|
- height: 550px;
|
|
|
- background-image: linear-gradient(
|
|
|
- rgba(204, 148, 109, 0.8),
|
|
|
- rgba(119, 73, 38, 0.8)
|
|
|
- );
|
|
|
- & > h3 {
|
|
|
- font-size: 30px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .code {
|
|
|
- padding-top: 15px;
|
|
|
- background-color: #fff6d2;
|
|
|
- border-radius: 5px;
|
|
|
- width: 260px;
|
|
|
- height: 300px;
|
|
|
- margin: 30px auto;
|
|
|
- text-align: center;
|
|
|
- & > img {
|
|
|
- width: 240px;
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 100px);
|
|
|
+ background-color: rgba(255, 246, 210, 1);
|
|
|
+ .txt {
|
|
|
+ padding: 20px;
|
|
|
+ height: 90%;
|
|
|
+ overflow-y: auto;
|
|
|
+ color: #7e522f;
|
|
|
+ font-size: 16px;
|
|
|
+ & > span {
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ margin-top: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
- & > p {
|
|
|
- color: #774926;
|
|
|
- margin-top: 15px;
|
|
|
- font-size: 12px;
|
|
|
+ :hover {
|
|
|
+ color: #d4a781;
|
|
|
}
|
|
|
}
|
|
|
- .btnn {
|
|
|
- cursor: pointer;
|
|
|
- margin: 0 auto;
|
|
|
- width: 260px;
|
|
|
- height: 60px;
|
|
|
- border-radius: 30px;
|
|
|
- border: 2px solid #fff6d2;
|
|
|
- font-size: 20px;
|
|
|
- color: #fff6d2;
|
|
|
- text-align: center;
|
|
|
- line-height: 56px;
|
|
|
+ .active {
|
|
|
+ color: #d4a781;
|
|
|
+ pointer-events: none;
|
|
|
+ }
|
|
|
+ .txt::-webkit-scrollbar-thumb {
|
|
|
+ outline: 2px solid #cc946d;
|
|
|
+ }
|
|
|
+ .txt::-webkit-scrollbar {
|
|
|
+ width: 4px;
|
|
|
}
|
|
|
.close {
|
|
|
cursor: pointer;
|
|
|
- position: absolute;
|
|
|
- right: -18px;
|
|
|
- top: -18px;
|
|
|
- width: 44px;
|
|
|
- height: 44px;
|
|
|
- background: url("../../../assets/img/close.png");
|
|
|
- background-size: 100% 100%;
|
|
|
+ width: 100%;
|
|
|
+ height: 10%;
|
|
|
+ background: url("../../../assets/img/close.png") no-repeat center center;
|
|
|
+ background-size: 44px 44px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.full {
|
|
|
- width: 100%;
|
|
|
+ transform: translateX(0);
|
|
|
}
|
|
|
</style>
|
