feat(uniapp_v2): 二开功能迁移与小程序主包优化
- 从 uniapp 迁移 HJF 页面、API、组件及用户/订单相关改动 - queue、assets 使用独立分包以降低主包体积 - 修复首页单根节点与支付结果页 v-if 链 - 关闭 HjfDemoPanel 全局注册；uniNoticeBar 注释 $getAppWebview 避免 __webviewId__ 报错 - 配置域名与 manifest 应用名称；cache/store 防御性处理 Made-with: Cursor
This commit is contained in:
apple
614
pro_v3.5.1/view/uniapp_v2/pages/goods/goodsShare/index.vue
Normal file
614
pro_v3.5.1/view/uniapp_v2/pages/goods/goodsShare/index.vue
Normal file
@@ -0,0 +1,614 @@
|
||||
<template>
|
||||
<view :style="colorStyle">
|
||||
<view class="px-20">
|
||||
<view class="w-full bg--w111-fff rd-24rpx p-24 mt-24"v-show="showCardOne">
|
||||
<view class='flex-y-center'>
|
||||
<text class="iconfont icon-icon_WeChat_1 fs-36"></text>
|
||||
<text class="fs-30 lh-42rpx fw-500 pl-8">方式一：商品卡片分享</text>
|
||||
</view>
|
||||
<view class="mt-24 w-full h-256 bg--w111-f9f9f9 rd-12rpx relative bg-cover" :style="[shareCardBg]">
|
||||
<view class="flex-y-center card-site">
|
||||
<image :src="mpData.logo_url" class="site-logo"></image>
|
||||
<text class="site-name line1">{{mpData.site_name}}</text>
|
||||
</view>
|
||||
<image :src="storeInfo.image" class="w-210 h-168 card-center-image" mode="aspectFill"></image>
|
||||
<!-- -->
|
||||
</view>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<button class="w-full bg-gradient h-80 rd-40rpx flex-center fs-28 text--w111-fff mt-24" open-type="share" hover-class="none">分享商品卡片</button>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP || H5 -->
|
||||
<view class="w-full bg-gradient h-80 rd-40rpx flex-center fs-28 text--w111-fff mt-24" @tap="cardShare">分享商品卡片</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<view class="w-full bg--w111-fff rd-24rpx p-24 mt-32">
|
||||
<view class="flex-between-center">
|
||||
<view class='flex-y-center'>
|
||||
<image src="../static/share_picture.png" class="w-36 h-36"></image>
|
||||
<text class="fs-30 lh-42rpx fw-500 pl-8">方式{{showCardOne ? '二' : '一'}}：商品图片分享</text>
|
||||
</view>
|
||||
<text class="iconfont fs-28 text--w111-666"
|
||||
v-if="storeInfo.slider_image.length > 1"
|
||||
:class="isGrid ? 'icon-a-ic_Imageandtextsorting' : 'icon-a-ic_Picturearrangement'"
|
||||
@tap="()=>{isGrid = !isGrid}"></text>
|
||||
</view>
|
||||
<view v-if="storeInfo.slider_image.length == 1">
|
||||
<view class="mt-24 flex-x-center" >
|
||||
<view class="load-box poster-img" v-show="!posterImage"></view>
|
||||
<image v-show="posterImage" :src="posterImage" @tap="proviewPhoto(0)" class="poster-img" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="w-full flex-between-center">
|
||||
<!-- #ifdef MP-WEIXIN || APP-PLUS -->
|
||||
<view class="w-full bg-gradient h-80 rd-40rpx flex-center fw-500 fs-28 text--w111-fff mt-24" @tap="savePoster">保存商品海报图片</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<view class="w-full bg-gradient h-80 rd-40rpx flex-center fs-28 text--w111-fff mt-24" @tap="proviewPhoto(0)">保存分享</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
<view class="mt-24" v-show="!isGrid">
|
||||
<scroll-view scroll-x="true" class="white-nowrap vertical-middle w-full" show-scrollbar="false">
|
||||
<view class="inline-block mr-16" v-show="!posterImage">
|
||||
<view class="load-box w-192 h-192 rd-8rpx"></view>
|
||||
</view>
|
||||
<view class="inline-block mr-16" v-for="(item,index) in productSwiper" :key="index">
|
||||
<view class="w-192 h-192 relative text--w111-fff" @tap="proviewPhoto(index)">
|
||||
<image :src="item.pic" class="w-full h-full rd-8rpx"
|
||||
:class="{'b-e': item.isQrcode}" mode="aspectFill"></image>
|
||||
<view class="qr-tag flex-center fs-18 text--w111-fff" v-if="posterImage && item.isQrcode">二维码推广图</view>
|
||||
<!-- #ifdef MP-WEIXIN || APP-PLUS -->
|
||||
<text class="iconfont fs-36 select-icon"
|
||||
:class="item.select ? 'icon-a-ic_CompleteSelect' : 'icon-ic_unselect'" @tap.stop="selectPic(item)"></text>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="w-full grid-column-3 grid-gap-16rpx mt-24" v-show="isGrid">
|
||||
<view class="load-box w-full h-210 rd-12rpx" v-show="!posterImage"></view>
|
||||
<view class="w-full h-210 relative text--w111-fff"
|
||||
:class="{'b-e rd-12rpx': item.isQrcode}"
|
||||
v-for="(item,index) in productSwiper" :key="index"
|
||||
@tap="proviewPhoto(index)">
|
||||
<image :src="item.pic" class="w-full h-full rd-12rpx"
|
||||
mode="aspectFill"></image>
|
||||
<view class="qr-tag flex-center fs-18 text--w111-fff" v-if="posterImage && item.isQrcode">二维码推广图</view>
|
||||
<!-- #ifdef MP-WEIXIN || APP-PLUS -->
|
||||
<text class="iconfont fs-36 select-icon"
|
||||
:class="item.select ? 'icon-a-ic_CompleteSelect' : 'icon-ic_unselect'"
|
||||
@tap.stop="selectPic(item)"></text>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="w-full flex-between-center">
|
||||
<!-- #ifdef MP-WEIXIN || APP-PLUS -->
|
||||
<view class="w-320 h-80 rd-40rpx flex-center fs-26 view-border fw-500 font-num mt-24" @tap="savePhoto('pic')">保存选中图片</view>
|
||||
<view class="w-320 bg-gradient h-80 rd-40rpx flex-center fw-500 fs-28 text--w111-fff mt-24" @tap="savePhoto('poster')">保存商品海报图片</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<view class="w-full bg-gradient h-80 rd-40rpx flex-center fs-28 text--w111-fff mt-24" @tap="proviewPhoto(0)">保存分享</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="w-full bg--w111-fff rd-24rpx p-24 mt-24">
|
||||
<view class='flex-y-center'>
|
||||
<image src="../static/share_text.png" class="w-36 h-36"></image>
|
||||
<text class="fs-30 lh-42rpx fw-500 pl-8">方式{{showCardOne ? '三' : '二'}}：文案分享</text>
|
||||
</view>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="mt-24 bg--w111-f9f9f9 rd-12rpx p-16 fs-26 lh-36rpx space-line">
|
||||
{{storeInfo.share_content || storeInfo.store_name}}
|
||||
<text><br/>{{shortLink}}</text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 || APP-PLUS -->
|
||||
<view class="mt-24 bg--w111-f9f9f9 rd-12rpx p-16 fs-26 lh-36rpx space-line">
|
||||
{{storeInfo.share_content || storeInfo.store_name}}
|
||||
<text><br/>{{codeVal}}</text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<view class="w-full flex-between-center">
|
||||
<view class="w-320 h-80 rd-40rpx flex-center fs-26 view-border fw-500 font-num mt-24" @tap="copyShare(0)">仅复制链接</view>
|
||||
<view class="w-320 bg-gradient h-80 rd-40rpx flex-center fw-500 fs-28 text--w111-fff mt-24" @tap="copyShare(1)">复制文案及链接</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pb-safe">
|
||||
<view class="h-80"></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #ifdef H5 || APP-PLUS -->
|
||||
<zb-code ref="qrcode" onval loadMake :show="codeShow" cid="1" :val="codeVal" @result="qrR" />
|
||||
<!-- #endif -->
|
||||
<canvas class="canvas" canvas-id="myCanvas" v-if="canvasStatus"></canvas>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import colors from "@/mixins/color";
|
||||
import {HTTP_REQUEST_URL} from '@/config/app';
|
||||
import { getProductDetail, getProductCode, getShortLinkApi } from "@/api/store.js";
|
||||
import { getUserInfo, userShare } from '@/api/user.js';
|
||||
import { toLogin } from '@/libs/login.js';
|
||||
import { mapGetters } from 'vuex';
|
||||
import zbCode from '@/components/zb-code/zb-code.vue'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imgHost: HTTP_REQUEST_URL,
|
||||
id: 0,
|
||||
canvasStatus: false,
|
||||
//二维码参数
|
||||
codeShow: false,
|
||||
codeVal: "", // 要生成的二维码值
|
||||
shareQrcode: 0,
|
||||
PromotionCode: '',
|
||||
followCode: '',
|
||||
siteName: '', //商城名称
|
||||
posterTitle: '',
|
||||
themeColor: '#e93323',
|
||||
fontColor: '#e93323',
|
||||
posterImage: '', //海报路径
|
||||
storeImage: '', //海报产品图
|
||||
isDown: true,
|
||||
posterImageStatus: false,
|
||||
storeInfo:{
|
||||
slider_image: []
|
||||
},
|
||||
productSwiper: [],
|
||||
showCardOne: true,
|
||||
shortLink: '',
|
||||
isGrid: true,
|
||||
mpData:{}
|
||||
};
|
||||
},
|
||||
components: { zbCode },
|
||||
computed:{
|
||||
...mapGetters(['isLogin', 'uid']),
|
||||
shareCardBg(){
|
||||
return {
|
||||
backgroundImage: 'url('+this.imgHost+'/statics/images/promoter/promoter_group9.png'+')'
|
||||
}
|
||||
},
|
||||
},
|
||||
mixins: [colors],
|
||||
onLoad(options) {
|
||||
// #ifdef H5
|
||||
this.showCardOne = this.$wechat.isWeixin() ? true : false;
|
||||
// #endif
|
||||
if (!options.id) {
|
||||
return this.$util.Tips({
|
||||
title: '缺少参数无法查看商品'
|
||||
}, {
|
||||
tab: 3
|
||||
});
|
||||
}
|
||||
this.id = options.id || 0;
|
||||
this.getInfo();
|
||||
// #ifdef MP-WEIXIN
|
||||
this.mpData = uni.getStorageSync('BASIC_CONFIG');
|
||||
this.getShortLink();
|
||||
// #endif
|
||||
},
|
||||
onReady: function() {
|
||||
this.isNodes++;
|
||||
let uid = this.isLogin ? this.$store.state.app.uid : ''
|
||||
// #ifdef H5
|
||||
this.codeVal = window.location.origin + '/pages/goods_details/index?id=' + this.id +
|
||||
'&spid=' + uid
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
this.codeVal = HTTP_REQUEST_URL + '/pages/goods_details/index?id=' + this.id +
|
||||
'&spid=' + uid
|
||||
// #endif
|
||||
},
|
||||
methods:{
|
||||
async getInfo(){
|
||||
let res = await getProductDetail(this.id, {promotions_type: 0});
|
||||
let storeInfo = res.data.storeInfo;
|
||||
this.$set(this, 'storeInfo', storeInfo);
|
||||
this.$set(this, 'shareQrcode', res.data.share_qrcode);
|
||||
this.$set(this, 'siteName', res.data.site_name);
|
||||
this.$set(this, 'posterTitle', res.data.product_poster_title);
|
||||
this.productSwiper = storeInfo.slider_image.map(item=>{
|
||||
return {
|
||||
pic: item,
|
||||
select: false,
|
||||
isQrcode: false,
|
||||
}
|
||||
})
|
||||
setTimeout(()=>{
|
||||
this.goPoster();
|
||||
},500)
|
||||
},
|
||||
getShortLink(){
|
||||
getShortLinkApi(this.id).then(res=>{
|
||||
this.shortLink = res.data.code;
|
||||
}).catch(err=>{
|
||||
return this.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
})
|
||||
},
|
||||
copyShare(type){
|
||||
let that = this;
|
||||
let shareText = this.storeInfo.share_content || this.storeInfo.store_name;
|
||||
let copyText = '';
|
||||
// #ifdef MP-WEIXIN
|
||||
copyText = type == 1 ? shareText + ' ' + this.shortLink : this.shortLink;
|
||||
// #endif
|
||||
// #ifdef APP-PLUS || H5
|
||||
copyText = type == 1 ? shareText + ' ' + this.codeVal : this.codeVal;
|
||||
// #endif
|
||||
uni.setClipboardData({
|
||||
data: copyText,
|
||||
success:()=>{
|
||||
uni.showToast({
|
||||
title: '复制成功，快去分享吧',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
qrR(res) {
|
||||
// #ifdef H5
|
||||
if (!this.$wechat.isWeixin() || this.shareQrcode != '1') {
|
||||
this.PromotionCode = res;
|
||||
this.followCode = ''
|
||||
}
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
this.PromotionCode = res;
|
||||
// #endif
|
||||
},
|
||||
//替换安全域名
|
||||
setDomain: function(url) {
|
||||
url = url ? url.toString() : '';
|
||||
//本地调试打开,生产请注销
|
||||
if (url.indexOf('https://') > -1) return url;
|
||||
else return url.replace('http://', 'https://');
|
||||
},
|
||||
//图片转符合安全域名路径
|
||||
downloadFileImage(url) {
|
||||
url = this.setDomain(url)
|
||||
return new Promise((resolve, reject) => {
|
||||
let that = this;
|
||||
uni.downloadFile({
|
||||
url: url,
|
||||
success: function(res) {
|
||||
resolve(res.tempFilePath);
|
||||
},
|
||||
fail: function(err) {
|
||||
console.error(err.errMsg);
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
async goPoster() {
|
||||
let that = this;
|
||||
let storeImage = await this.downloadFileImage(this.storeInfo.image);
|
||||
let posterbackgd = await this.downloadFileImage(this.imgHost + '/statics/images/product/posterbackgd.png');
|
||||
// #ifdef MP-WEIXIN
|
||||
// 小程序端获取小程序码
|
||||
let res = await getProductCode(that.id);
|
||||
if(!res.data.code){
|
||||
return that.$util.Tips({
|
||||
title: '小程序二维码需要发布正式版后才能获取到'
|
||||
});
|
||||
}
|
||||
let PromotionCode = await this.downloadFileImage(res.data.code)
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
let PromotionCode = '';
|
||||
if(this.$wechat.isWeixin()){
|
||||
// 公众号端获取公众号二维码
|
||||
let res = await getProductCode(that.id);
|
||||
PromotionCode = await this.downloadFileImage(res.data.code)
|
||||
}else{
|
||||
// h5端获取本地生成的二维码
|
||||
PromotionCode = this.PromotionCode;
|
||||
}
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
let PromotionCode = this.PromotionCode;
|
||||
// #endif
|
||||
that.$set(that, 'canvasStatus', true);
|
||||
|
||||
let arr2 = [posterbackgd, storeImage, PromotionCode];
|
||||
that.$nextTick(function() {
|
||||
setTimeout(()=>{
|
||||
that.$util.PosterCanvas(that.fontColor, that.themeColor, that.siteName,arr2,
|
||||
that.storeInfo.store_name,
|
||||
that.storeInfo.price,
|
||||
that.storeInfo.ot_price,
|
||||
that.posterTitle,
|
||||
function(tempFilePath) {
|
||||
that.$set(that, 'posterImage', tempFilePath);
|
||||
that.$set(that, 'posterImageStatus', true);
|
||||
that.$set(that, 'canvasStatus', false);
|
||||
that.productSwiper.unshift({
|
||||
pic:tempFilePath,
|
||||
select: false,
|
||||
isQrcode:true
|
||||
})
|
||||
});
|
||||
},1000)
|
||||
})
|
||||
},
|
||||
cardShare(){
|
||||
// #ifdef H5
|
||||
this.ShareInfo();
|
||||
uni.showToast({
|
||||
title: '请点击右上角三个点进行分享',
|
||||
icon: 'none'
|
||||
})
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
this.appShare();
|
||||
// #endif
|
||||
},
|
||||
//#ifdef H5
|
||||
ShareInfo() {
|
||||
let data = this.storeInfo;
|
||||
if (this.$wechat.isWeixin()) {
|
||||
let configAppMessage = {
|
||||
desc: data.store_info,
|
||||
title: data.store_name,
|
||||
link: '/pages/goods_details/index?id=' + this.id + '&spid=' + this.uid,
|
||||
imgUrl: data.image
|
||||
};
|
||||
this.$wechat.wechatEvevt([
|
||||
'updateAppMessageShareData',
|
||||
'updateTimelineShareData',
|
||||
'onMenuShareAppMessage',
|
||||
'onMenuShareTimeline'
|
||||
], configAppMessage).then(res => {}).catch(err => {});
|
||||
}
|
||||
},
|
||||
//#endif
|
||||
appShare() {
|
||||
let that = this;
|
||||
uni.share({
|
||||
provider: "weixin",
|
||||
scene: 'WXSceneSession',
|
||||
type: 0,
|
||||
href: `${HTTP_REQUEST_URL}/pages/goods_details/index?id=${that.id}&spid=${that.uid}`,
|
||||
title: that.storeInfo.store_name,
|
||||
summary: that.storeInfo.store_info,
|
||||
imageUrl: that.storeInfo.small_image,
|
||||
success: function(res) {
|
||||
|
||||
},
|
||||
fail: function(err) {
|
||||
uni.showToast({
|
||||
title: '分享失败',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
selectPic(item){
|
||||
item.select = !item.select;
|
||||
},
|
||||
savePhoto(type){
|
||||
// #ifdef MP-WEIXIN
|
||||
let that = this;
|
||||
uni.getSetting({
|
||||
success(res){
|
||||
if (!res.authSetting['scope.writePhotosAlbum']) {
|
||||
uni.authorize({
|
||||
scope: 'scope.writePhotosAlbum',
|
||||
success() {
|
||||
if(type == 'poster'){
|
||||
that.savePoster()
|
||||
}else{
|
||||
that.mpSave();
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
}else{
|
||||
if(type == 'poster'){
|
||||
that.savePoster()
|
||||
}else{
|
||||
that.mpSave();
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
if(type == 'poster'){
|
||||
this.savePoster()
|
||||
}else{
|
||||
this.mpSave();
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
mpSave(){
|
||||
let that = this;
|
||||
let arr = this.productSwiper.filter(val => val.select);
|
||||
let picLength = arr.length; // 要下载的总条数
|
||||
let index = 0;
|
||||
uni.showLoading({
|
||||
title: '图片下载中',
|
||||
mask: true
|
||||
});
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
if(arr[i].isQrcode){
|
||||
this.savePoster();
|
||||
}else{
|
||||
uni.downloadFile({
|
||||
url: arr[i].pic,
|
||||
success: function(res) {
|
||||
var temp = res.tempFilePath
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: temp,
|
||||
success(res1) {
|
||||
index++;
|
||||
// 全部下载完后触发
|
||||
if (index == picLength) {
|
||||
uni.hideLoading()
|
||||
that.$util.Tips({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: function(res) {
|
||||
uni.hideLoading()
|
||||
that.$util.Tips({
|
||||
title: '保存失败'
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
fail(err) {
|
||||
uni.hideLoading()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
savePoster(){
|
||||
let that = this;
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: that.posterImage,
|
||||
success(res1) {
|
||||
that.$util.Tips({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
});
|
||||
},
|
||||
fail: function(res) {
|
||||
that.$util.Tips({
|
||||
title: '保存失败'
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
proviewPhoto(index){
|
||||
let list = this.productSwiper.map(item=> item.pic);
|
||||
uni.previewImage({
|
||||
current: index,
|
||||
urls: list
|
||||
});
|
||||
},
|
||||
},
|
||||
// #ifdef MP
|
||||
onShareAppMessage: function() {
|
||||
let that = this;
|
||||
userShare();
|
||||
return {
|
||||
title: that.storeInfo.store_name || '',
|
||||
imageUrl: that.storeInfo.image || '',
|
||||
path: '/pages/goods_details/index?id=' + that.id + '&spid=' + that.uid
|
||||
};
|
||||
},
|
||||
onShareTimeline() {
|
||||
let that = this;
|
||||
userShare();
|
||||
return {
|
||||
title: that.storeInfo.store_name || '',
|
||||
imageUrl: that.storeInfo.image || '',
|
||||
path: '/pages/goods_details/index?id=' + that.id + '&spid=' + that.uid
|
||||
};
|
||||
},
|
||||
// #endif
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.icon-icon_WeChat_1{
|
||||
color: rgba(11, 190, 36, 1);
|
||||
}
|
||||
.h-256{
|
||||
height: 256rpx;
|
||||
}
|
||||
.bg-cover{
|
||||
background-size: cover;
|
||||
}
|
||||
.card-site{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 24rpx;
|
||||
transform: translateX(-50%);
|
||||
width: 210rpx;
|
||||
.site-logo{
|
||||
width: 18rpx;
|
||||
height: 18rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.site-name{
|
||||
width: 152rpx;
|
||||
font-size: 18rpx;
|
||||
color: #727272;
|
||||
line-height: 16rpx;
|
||||
padding-left: 4rpx;
|
||||
}
|
||||
}
|
||||
.card-center-image{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 48rpx;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.poster-img{
|
||||
width: 254rpx;
|
||||
height: 438rpx;
|
||||
border-radius: 12rpx;
|
||||
border: 1rpx solid #EEEEEE;
|
||||
}
|
||||
.load-box{
|
||||
animation: looming-gray 1s infinite linear;
|
||||
background-color: #e3e3e3;
|
||||
}
|
||||
.view-border{
|
||||
border: 1px solid var(--view-theme);
|
||||
}
|
||||
.icon-a-ic_CompleteSelect{
|
||||
color: var(--view-theme);
|
||||
}
|
||||
.space-line{
|
||||
white-space: pre-line
|
||||
}
|
||||
.select-icon{
|
||||
position: absolute;
|
||||
top: 12rpx;
|
||||
right: 12rpx;
|
||||
}
|
||||
.b-e{
|
||||
border: 1rpx solid #EEEEEE;
|
||||
}
|
||||
.qr-tag{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 40rpx;
|
||||
border-radius: 0 0 8rpx 8rpx;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.canvas {
|
||||
position: fixed;
|
||||
top: -1300px;
|
||||
left: 0;
|
||||
width: 750px;
|
||||
height: 1300px;
|
||||
}
|
||||
@keyframes looming-gray {
|
||||
0% {
|
||||
background-color: #e3e3e3aa;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-color: #e3e3e3;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-color: #e3e3e3aa;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user