|
|
@@ -21,6 +21,29 @@
|
|
|
<van-button type="default" @click="$router.back()" round>返回</van-button>
|
|
|
<van-button type="primary" v-if="address" round @click="sure">确认</van-button>
|
|
|
</div>
|
|
|
+
|
|
|
+ <van-overlay :show="show" @click="show = false" z-index="99">
|
|
|
+ <div class="notice" @click.stop="">
|
|
|
+ <div class="text1">抖音绑定说明</div>
|
|
|
+ <div class="text2">选择抖音视频 <span>复制链接</span> 来粘贴吧</div>
|
|
|
+ <div class="tips">
|
|
|
+ <div class="tips-text">
|
|
|
+ <span class="box">1</span>
|
|
|
+ 复制抖音链接
|
|
|
+ </div>
|
|
|
+ <img src="@/assets/douyin-shuoming1.png" alt="" />
|
|
|
+ <img src="@/assets/douyin-shuoming2.png" alt="" />
|
|
|
+ <div class="tips-text">
|
|
|
+ <span class="box">2</span>
|
|
|
+ 粘贴链接
|
|
|
+ </div>
|
|
|
+ <img src="@/assets/douyin-shuoming3.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="btn">
|
|
|
+ <van-button type="primary" block round @click="show = false">知道了</van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-overlay>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
@@ -30,7 +53,8 @@ export default {
|
|
|
return {
|
|
|
address: '',
|
|
|
assetId: 0,
|
|
|
- type: 'EXTERNALLINK'
|
|
|
+ type: 'EXTERNALLINK',
|
|
|
+ show: false
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -49,6 +73,10 @@ export default {
|
|
|
if (this.$route.query.type) {
|
|
|
this.type = this.$route.query.type;
|
|
|
}
|
|
|
+
|
|
|
+ if (this.type === 'VIBRATO_VIDEO') {
|
|
|
+ this.show = true;
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
sure() {
|
|
|
@@ -155,4 +183,75 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.notice {
|
|
|
+ width: 300px;
|
|
|
+ height: 495px;
|
|
|
+ background: #161414;
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 1px solid #302b30;
|
|
|
+ backdrop-filter: blur(11px);
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ .flex-col();
|
|
|
+ align-items: center;
|
|
|
+ padding: 20px 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .text1 {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 25px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text2 {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #939599;
|
|
|
+ line-height: 24px;
|
|
|
+ margin-top: 4px;
|
|
|
+ span {
|
|
|
+ color: #00fe1e;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.tips {
|
|
|
+ background: #1f1d1d;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 16px;
|
|
|
+ margin-top: 12px;
|
|
|
+
|
|
|
+ .tips-text {
|
|
|
+ .box {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ background: #00fe1e;
|
|
|
+ border-radius: 14px;
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 14px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ font-size: 12px;
|
|
|
+ color: #00fe1e;
|
|
|
+ line-height: 17px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 228px;
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.btn {
|
|
|
+ width: 160px;
|
|
|
+}
|
|
|
</style>
|
