97 lines
2.3 KiB
Vue
97 lines
2.3 KiB
Vue
<template>
|
||
<view class="wechat-contact-page">
|
||
<!-- 顶部导航栏 -->
|
||
<uni-nav-bar
|
||
left-icon="left"
|
||
title="微信关联"
|
||
@clickLeft="goBack"
|
||
fixed
|
||
color="#8B2316"
|
||
height="140rpx"
|
||
:border="false"
|
||
backgroundColor="#eeeeee"
|
||
></uni-nav-bar>
|
||
|
||
<!-- 微信卡片 -->
|
||
<view class="card">
|
||
<view class="wx-left">
|
||
<up-image :src="wxIcon" width="120rpx" height="120rpx" mode="aspectFill"></up-image>
|
||
</view>
|
||
<view class="wx-center">
|
||
<view class="wx-title">微信</view>
|
||
<view class="wx-sub">未绑定微信</view>
|
||
</view>
|
||
<view class="wx-right">
|
||
<button class="bind-btn" @click="onBind">绑定</button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 操作说明 -->
|
||
<view class="tips">
|
||
<view class="tips-title">操作说明:</view>
|
||
<view class="tips-line">1. 肝胆相照注册账号与微信绑定，肝胆相照相关直播、视频无忧随心看</view>
|
||
<view class="tips-line">2. 仅需操作一次，后续通过微信观看直播、视频无需额外操作，立即进入</view>
|
||
<view class="tips-line">
|
||
若您有任何疑问或需要我们协助，请与您的小助手联系或直接微信联系
|
||
<text class="highlight">igandan1000</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue';
|
||
import wxIcon from '@/static/wechat_icon.png';
|
||
|
||
const goBack = () => {
|
||
uni.navigateBack();
|
||
};
|
||
|
||
const onBind = () => {
|
||
uni.showToast({ title: '去绑定', icon: 'none' });
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.wechat-contact-page {
|
||
min-height: 100vh;
|
||
background: #ffffff;
|
||
padding-top: 160rpx;
|
||
}
|
||
|
||
.card {
|
||
display: flex;
|
||
align-items: center;
|
||
background: #ffffff;
|
||
margin: 20rpx 0;
|
||
padding: 30rpx;
|
||
border-bottom: 2rpx solid #f0f0f0;
|
||
.wx-left { margin-right: 24rpx; }
|
||
.wx-center {
|
||
flex: 1;
|
||
.wx-title { font-size: 34rpx; color: #222222; }
|
||
.wx-sub { margin-top: 10rpx; font-size: 26rpx; color: #9e9e9e; }
|
||
}
|
||
.wx-right {
|
||
.bind-btn {
|
||
min-width: 140rpx;
|
||
height: 64rpx;
|
||
background: #2ecc71;
|
||
color: #ffffff;
|
||
border: none;
|
||
border-radius: 12rpx;
|
||
font-size: 28rpx;
|
||
padding: 0 24rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tips {
|
||
padding: 30rpx;
|
||
background: #f7f7f7;
|
||
.tips-title { font-size: 30rpx; color: #222222; margin-bottom: 16rpx; }
|
||
.tips-line { font-size: 28rpx; color: #666666; line-height: 1.8; margin-bottom: 10rpx; }
|
||
.highlight { color: #e53935; }
|
||
}
|
||
</style>
|