jxg/jinxiangguo-home-master/components/popup-shequ/popup-shequ.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>