168 lines
4.0 KiB
Vue
168 lines
4.0 KiB
Vue
<template>
|
|
<view>
|
|
<touch-popup ref="popup" background="linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%)" :backShow="true">
|
|
<view class="bck">
|
|
<view style="width: 100%;height: 15px;"></view>
|
|
<view class="star1">
|
|
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/shequ/star1.png" mode="widthFix"></image>
|
|
</view>
|
|
<view class="star2">
|
|
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/shequ/star2.png" mode="widthFix"></image>
|
|
</view>
|
|
<view class="star3">
|
|
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/shequ/star3.png" mode="widthFix"></image>
|
|
</view>
|
|
<view class="star4">
|
|
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/shequ/star4.png" mode="widthFix"></image>
|
|
</view>
|
|
<view class="star5">
|
|
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/shequ/star5.png" mode="widthFix"></image>
|
|
</view>
|
|
<view class="logo">
|
|
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/shequ/松鼠ip.png" mode="widthFix"></image>
|
|
</view>
|
|
|
|
<view class="title center">
|
|
社区号
|
|
</view>
|
|
<view class="qrcode">
|
|
<view class="item">
|
|
<view>
|
|
<image show-menu-by-longpress src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/shequ/wx-qrcode.png" mode="widthFix"></image>
|
|
</view>
|
|
<view>
|
|
微信
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view>
|
|
<image show-menu-by-longpress src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/shequ/douyin-qrcode.png" mode="widthFix"></image>
|
|
</view>
|
|
<view>
|
|
抖音
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view>
|
|
<image show-menu-by-longpress src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/shequ/qq-qrcode.png" mode="widthFix"></image>
|
|
</view>
|
|
<view>
|
|
QQ
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view>
|
|
<image show-menu-by-longpress src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/shequ/xhs-qrcode.png" mode="widthFix"></image>
|
|
</view>
|
|
<view>
|
|
小红书
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</touch-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
const app = getApp()
|
|
import { ref, defineExpose, computed } from 'vue'
|
|
import touchPopup from '@/components/touch-popup/touch-popup'
|
|
const popup = ref() // ref组件
|
|
|
|
const open = () => {
|
|
popup.value.open()
|
|
}
|
|
defineExpose({
|
|
open
|
|
}) // 暴露方法
|
|
</script>
|
|
|
|
<style scoped>
|
|
.item image {
|
|
width: 120px;
|
|
}
|
|
.item view:first-child {
|
|
flex: 1;
|
|
display: flex;
|
|
padding: 10px;
|
|
background-color: #fff;
|
|
border-radius: 15px;
|
|
}
|
|
.item view:last-child {
|
|
display: flex;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
padding: 5px;
|
|
}
|
|
.item {
|
|
padding-top: 15px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.qrcode {
|
|
padding: 15px 20px;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
.title {
|
|
padding: 15px;
|
|
}
|
|
.logo image {
|
|
width: 400rpx;
|
|
}
|
|
.logo {
|
|
position: absolute;
|
|
display: flex;
|
|
left: 0;
|
|
bottom: 0;
|
|
}
|
|
.star5 image {
|
|
width: 44px;
|
|
}
|
|
.star5 {
|
|
position: absolute;
|
|
right: 12px;
|
|
bottom: 29px;
|
|
}
|
|
.star4 image {
|
|
width: 14px;
|
|
}
|
|
.star4 {
|
|
position: absolute;
|
|
right: 18px;
|
|
bottom: 150px;
|
|
}
|
|
.star3 image {
|
|
width: 14px;
|
|
}
|
|
.star3 {
|
|
position: absolute;
|
|
left: 18px;
|
|
top: calc(50% + 30px);
|
|
}
|
|
.star2 image {
|
|
width: 20px;
|
|
}
|
|
.star2 {
|
|
position: absolute;
|
|
left: 15px;
|
|
top: calc(40% - 50px);
|
|
}
|
|
.star1 image {
|
|
width: 32px;
|
|
height: auto;
|
|
}
|
|
.star1 {
|
|
position: absolute;
|
|
top: 35px;
|
|
left: calc(50% - 100px);
|
|
}
|
|
.bck {
|
|
height: 100%;
|
|
background: url('https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/shequ/bck.png') no-repeat;
|
|
background-size: 750rpx;
|
|
background-position: bottom;
|
|
}
|
|
</style> |