|
|
@@ -0,0 +1,597 @@
|
|
|
+<template name="share">
|
|
|
+ <view class="poster_page">
|
|
|
+ <nav-bar title="海报"></nav-bar>
|
|
|
+ <canvas canvas-id="poster" class="poster_canvas"></canvas>
|
|
|
+ <swiper class="poster_swiper" previous-margin="110rpx" circular :current="swiperIndex" next-margin="110rpx" @change="onSwiperChange">
|
|
|
+ <swiper-item v-for="(item, index) of dataInfo.headImgs" :key="index">
|
|
|
+ <view class="goods_info_box" :class="{ active: swiperIndex == index }">
|
|
|
+ <image class="goods_image" :src="item" mode="aspectFit"></image>
|
|
|
+ <view class="goods_info">
|
|
|
+ <view class="goods_name">{{dataInfo.goodsRecommendShare.goodsName}}</view>
|
|
|
+ <view class="price_box">
|
|
|
+ <view class="price">{{dataInfo.goodsRecommendShare.goodsPrice}}</view>
|
|
|
+ <view class="store_price">{{dataInfo.priceShop}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="poster_info">
|
|
|
+ <view class="info">
|
|
|
+ <view>长按识别二维码访问</view>
|
|
|
+ <text>{{platformName}}</text>
|
|
|
+ </view>
|
|
|
+ <image class="poster_code_image" :src="dataInfo.goodsRecommendShare.recommendCodeGoods" mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ <view class="share_save_box">
|
|
|
+ <!-- #ifdef MP -->
|
|
|
+ <button open-type="share">
|
|
|
+ <image src="@/static/demo/ic_pic.png" mode="aspectFit"></image>
|
|
|
+ <text>发给好友</text>
|
|
|
+ </button>
|
|
|
+ <!-- #endif -->
|
|
|
+ <!-- #ifdef APP-PLUS -->
|
|
|
+ <button @click="onAppShare">
|
|
|
+ <image src="@/static/demo/ic_pic.png" mode="aspectFit"></image>
|
|
|
+ <text>发给好友</text>
|
|
|
+ </button>
|
|
|
+ <!-- #endif -->
|
|
|
+ <button class="onSave" @click="onSaveImg">
|
|
|
+ <image src="@/static/demo/ic_weixin.png" mode="aspectFit"></image>
|
|
|
+ <text>保存图片</text>
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ <!-- #ifdef H5 -->
|
|
|
+ <view class="h5_press_save" v-if="h5SaveImg" @click="h5SaveImg = ''">
|
|
|
+ <image :src="h5SaveImg" mode="widthFix"></image>
|
|
|
+ <button class="download">长按图片保存图片</button>
|
|
|
+ </view>
|
|
|
+ <!-- #endif -->
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { mapState, mapMutations } from 'vuex';
|
|
|
+// 文字换行
|
|
|
+function drawtext(text, maxWidth) {
|
|
|
+ let textArr = text.split("");
|
|
|
+ let len = textArr.length;
|
|
|
+ // 上个节点
|
|
|
+ let previousNode = 0;
|
|
|
+ // 记录节点宽度
|
|
|
+ let nodeWidth = 0;
|
|
|
+ // 文本换行数组
|
|
|
+ let rowText = [];
|
|
|
+ // 如果是字母，侧保存长度
|
|
|
+ let letterWidth = 0;
|
|
|
+ // 汉字宽度
|
|
|
+ let chineseWidth = 21;
|
|
|
+ // otherFont宽度
|
|
|
+ let otherWidth = 10.5;
|
|
|
+ for (let i = 0; i < len; i++) {
|
|
|
+ if (/[\u4e00-\u9fa5]|[\uFE30-\uFFA0]/g.test(textArr[i])) {
|
|
|
+ if(letterWidth > 0){
|
|
|
+ if(nodeWidth + chineseWidth + letterWidth * otherWidth > maxWidth){
|
|
|
+ rowText.push({
|
|
|
+ type: "text",
|
|
|
+ content: text.substring(previousNode, i)
|
|
|
+ });
|
|
|
+ previousNode = i;
|
|
|
+ nodeWidth = chineseWidth;
|
|
|
+ letterWidth = 0;
|
|
|
+ } else {
|
|
|
+ nodeWidth += chineseWidth + letterWidth * otherWidth;
|
|
|
+ letterWidth = 0;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if(nodeWidth + chineseWidth > maxWidth){
|
|
|
+ rowText.push({
|
|
|
+ type: "text",
|
|
|
+ content: text.substring(previousNode, i)
|
|
|
+ });
|
|
|
+ previousNode = i;
|
|
|
+ nodeWidth = chineseWidth;
|
|
|
+ }else{
|
|
|
+ nodeWidth += chineseWidth;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if(/\n/g.test(textArr[i])){
|
|
|
+ rowText.push({
|
|
|
+ type: "break",
|
|
|
+ content: text.substring(previousNode, i)
|
|
|
+ });
|
|
|
+ previousNode = i + 1;
|
|
|
+ nodeWidth = 0;
|
|
|
+ letterWidth = 0;
|
|
|
+ }else if(textArr[i] == "\\" && textArr[i + 1] == "n"){
|
|
|
+ rowText.push({
|
|
|
+ type: "break",
|
|
|
+ content: text.substring(previousNode, i)
|
|
|
+ });
|
|
|
+ previousNode = i + 2;
|
|
|
+ nodeWidth = 0;
|
|
|
+ letterWidth = 0;
|
|
|
+ }else if(/[a-zA-Z0-9]/g.test(textArr[i])){
|
|
|
+ letterWidth += 1;
|
|
|
+ if(nodeWidth + letterWidth * otherWidth > maxWidth){
|
|
|
+ rowText.push({
|
|
|
+ type: "text",
|
|
|
+ content: text.substring(previousNode, i + 1 - letterWidth)
|
|
|
+ });
|
|
|
+ previousNode = i + 1 - letterWidth;
|
|
|
+ nodeWidth = letterWidth * otherWidth;
|
|
|
+ letterWidth = 0;
|
|
|
+ }
|
|
|
+ } else{
|
|
|
+ if(nodeWidth + otherWidth > maxWidth){
|
|
|
+ rowText.push({
|
|
|
+ type: "text",
|
|
|
+ content: text.substring(previousNode, i)
|
|
|
+ });
|
|
|
+ previousNode = i;
|
|
|
+ nodeWidth = otherWidth;
|
|
|
+ }else{
|
|
|
+ nodeWidth += otherWidth;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (previousNode < len) {
|
|
|
+ rowText.push({
|
|
|
+ type: "text",
|
|
|
+ content: text.substring(previousNode, len)
|
|
|
+ });
|
|
|
+ }
|
|
|
+ return rowText;
|
|
|
+}
|
|
|
+let settingWritePhotosAlbum = false;
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ swiperIndex: 0,
|
|
|
+ posterImgs: [],
|
|
|
+ dataInfo: {
|
|
|
+ priceShop: "¥699.0",
|
|
|
+ headImgs: [
|
|
|
+ "http://qn.kemean.cn/file/upload/202005/21/1590043402088i2jxb79n.jpg?imageView2/0/w/800",
|
|
|
+ "http://qn.kemean.cn/file/upload/202005/21/1590043404759qml3zmlm.jpg?imageView2/0/w/800",
|
|
|
+ "http://qn.kemean.cn/file/upload/202005/21/1590043407501c6o63bmi.jpg?imageView2/0/w/800",
|
|
|
+ "http://qn.kemean.cn/file/upload/202005/21/1590043410966jwbtkyw1.jpg?imageView2/0/w/800",
|
|
|
+ "http://qn.kemean.cn/file/upload/202005/21/1590043413622bnysmgy9.jpg?imageView2/0/w/800"
|
|
|
+ ],
|
|
|
+ goodsRecommendShare: {
|
|
|
+ goodsImg: "https://qn.kemean.cn/file/upload/202005/21/1590043402088i2jxb79n.jpg?imageView2/0/w/800",
|
|
|
+ goodsName: "冰希黎巴黎红精粹沙龙香水50ml",
|
|
|
+ goodsPrice: "¥699.0",
|
|
|
+ mainLogo: "https://qn.kemean.cn//file/upload/202005/22/1590138818080cmvg4qnl.png",
|
|
|
+ recommendCodeGoods: "https://qn.kemean.cn/upload/202007/03/9c6a38df800e46bbba6aede3d84c3427"
|
|
|
+ },
|
|
|
+ share: {
|
|
|
+ shareContent: "商家云系统,点击了解",
|
|
|
+ shareImg: "http://qn.kemean.cn/file/upload/202005/21/1590043402088i2jxb79n.jpg?imageView2/0/w/800",
|
|
|
+ shareTitle: "冰希黎巴黎红精粹沙龙香水50ml",
|
|
|
+ shareUrl: "http://kemean.com/download/3jiayunbz/index.htmlpages/mall/shopPage/goodsDetail?objId=18111505&recommendCode=32029043"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ platformName: "",
|
|
|
+ h5SaveImg: ""
|
|
|
+ };
|
|
|
+ },
|
|
|
+ //第一次加载
|
|
|
+ onLoad(e) {
|
|
|
+ this.platformName = this.$base.platformName;
|
|
|
+ if (e.objId) {
|
|
|
+ this.objId = e.objId;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(["userInfo"])
|
|
|
+ },
|
|
|
+ //方法
|
|
|
+ methods: {
|
|
|
+ // 轮播图变化
|
|
|
+ onSwiperChange(e) {
|
|
|
+ this.swiperIndex = e.detail.current;
|
|
|
+ },
|
|
|
+ // 创建海报
|
|
|
+ createPoster() {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '海报生成中'
|
|
|
+ });
|
|
|
+ const ctx = uni.createCanvasContext('poster');
|
|
|
+ ctx.fillRect(0, 0, 375, 673);
|
|
|
+ ctx.setFillStyle("#FFF");
|
|
|
+ ctx.fillRect(0, 0, 375, 673);
|
|
|
+ uni.downloadFile({
|
|
|
+ url: this.dataInfo.headImgs[this.swiperIndex],
|
|
|
+ success: (res) => {
|
|
|
+ if (res.statusCode === 200) {
|
|
|
+ ctx.drawImage(res.tempFilePath, 0, 0, 375, 375);
|
|
|
+ uni.downloadFile({
|
|
|
+ url: this.dataInfo.goodsRecommendShare.recommendCodeGoods,
|
|
|
+ success: (res2) => {
|
|
|
+ if (res.statusCode === 200) {
|
|
|
+ // 商品标题
|
|
|
+ ctx.setFontSize(21);
|
|
|
+ ctx.setFillStyle('#333');
|
|
|
+ let drawtextList = drawtext(this.dataInfo.goodsRecommendShare.goodsName, 341);
|
|
|
+ let textTop = 0;
|
|
|
+ drawtextList.forEach((item,index) => {
|
|
|
+ if(index < 2){
|
|
|
+ textTop = 380 + (index + 1) * 28;
|
|
|
+ ctx.fillText(item.content, 17, textTop);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // 商品价格
|
|
|
+ ctx.setFontSize(26);
|
|
|
+ ctx.setFillStyle('#f00');
|
|
|
+ ctx.fillText(this.dataInfo.goodsRecommendShare.goodsPrice, 17, textTop + 47);
|
|
|
+ // 商品门市价
|
|
|
+ ctx.setFontSize(18);
|
|
|
+ ctx.setFillStyle('#999');
|
|
|
+ let textLeft = 38 + (this.dataInfo.goodsRecommendShare.goodsPrice.length * 13)
|
|
|
+ ctx.fillText(this.dataInfo.priceShop, textLeft, textTop + 45);
|
|
|
+ // 商品门市价横线
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.setLineWidth(1);
|
|
|
+ ctx.moveTo(textLeft - 1, textTop + 38);
|
|
|
+ ctx.lineTo((textLeft + 5 + this.dataInfo.priceShop.length * 9), textTop + 38);
|
|
|
+ ctx.setStrokeStyle('#999');
|
|
|
+ ctx.stroke();
|
|
|
+ // 商品分割线
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.setLineWidth(1);
|
|
|
+ ctx.moveTo(17, textTop + 70);
|
|
|
+ ctx.lineTo(358, textTop + 70);
|
|
|
+ ctx.setStrokeStyle('#eee');
|
|
|
+ ctx.stroke();
|
|
|
+ // 长按识别二维码访问
|
|
|
+ ctx.setFontSize(19);
|
|
|
+ ctx.setFillStyle('#333');
|
|
|
+ ctx.fillText("长按识别二维码访问", 17, textTop + 136);
|
|
|
+ // 平台名称
|
|
|
+ ctx.setFontSize(16);
|
|
|
+ ctx.setFillStyle('#999');
|
|
|
+ ctx.fillText(this.platformName, 17, textTop + 170);
|
|
|
+ // 二维码
|
|
|
+ ctx.drawImage(res2.tempFilePath, 238, textTop + 88, 120, 120);
|
|
|
+ ctx.draw(true, () => {
|
|
|
+ // canvas画布转成图片并返回图片地址
|
|
|
+ uni.canvasToTempFilePath({
|
|
|
+ canvasId: 'poster',
|
|
|
+ width: 375,
|
|
|
+ height: 673,
|
|
|
+ success: (res) => {
|
|
|
+ if(this.posterImgs[this.swiperIndex]){
|
|
|
+ this.posterImgs[this.swiperIndex].temporary = res.tempFilePath;
|
|
|
+ }else{
|
|
|
+ this.posterImgs[this.swiperIndex] = {
|
|
|
+ temporary: res.tempFilePath
|
|
|
+ };
|
|
|
+ }
|
|
|
+ console.log("海报制作成功！");
|
|
|
+ resolve(res.tempFilePath);
|
|
|
+ },
|
|
|
+ fail: () => {
|
|
|
+ uni.hideLoading();
|
|
|
+ reject();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showToast({
|
|
|
+ title: '海报制作失败，图片下载失败',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: err => {
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showToast({
|
|
|
+ title: '海报制作失败，图片下载失败',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showToast({
|
|
|
+ title: '海报制作失败，图片下载失败',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: err => {
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showToast({
|
|
|
+ title: '海报制作失败，图片下载失败',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 保存图片
|
|
|
+ async onSaveImg() {
|
|
|
+ let imgUrl = "";
|
|
|
+ if(this.posterImgs[this.swiperIndex] && this.posterImgs[this.swiperIndex].temporary){
|
|
|
+ imgUrl = await this.posterImgs[this.swiperIndex].temporary;
|
|
|
+ }else{
|
|
|
+ imgUrl = await this.createPoster();
|
|
|
+ }
|
|
|
+ // #ifdef H5
|
|
|
+ this.h5SaveImg = imgUrl;
|
|
|
+ uni.hideLoading();
|
|
|
+ // #endif
|
|
|
+ // #ifdef MP-WEIXIN
|
|
|
+ uni.showLoading({
|
|
|
+ title: '海报下载中'
|
|
|
+ });
|
|
|
+ if (settingWritePhotosAlbum) {
|
|
|
+ uni.getSetting({
|
|
|
+ success: res => {
|
|
|
+ if (res.authSetting['scope.writePhotosAlbum']) {
|
|
|
+ uni.saveImageToPhotosAlbum({
|
|
|
+ filePath: imgUrl,
|
|
|
+ success: () => {
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showToast({
|
|
|
+ title: '保存成功'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '请先在设置页面打开“保存相册”使用权限',
|
|
|
+ confirmText: '去设置',
|
|
|
+ cancelText: '算了',
|
|
|
+ success: data => {
|
|
|
+ if (data.confirm) {
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.openSetting();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ settingWritePhotosAlbum = true;
|
|
|
+ uni.authorize({
|
|
|
+ scope: 'scope.writePhotosAlbum',
|
|
|
+ success: () => {
|
|
|
+ uni.saveImageToPhotosAlbum({
|
|
|
+ filePath: imgUrl,
|
|
|
+ success: () => {
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showToast({
|
|
|
+ title: '保存成功'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // #endif
|
|
|
+ // #ifdef APP-PLUS
|
|
|
+ uni.showLoading({
|
|
|
+ title: '海报下载中'
|
|
|
+ });
|
|
|
+ uni.saveImageToPhotosAlbum({
|
|
|
+ filePath: imgUrl,
|
|
|
+ success: () => {
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showToast({
|
|
|
+ title: '保存成功'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // #endif
|
|
|
+ },
|
|
|
+ async onAppShare() {
|
|
|
+ // let imgUrl = "";
|
|
|
+ // if(this.posterImgs[this.swiperIndex] && this.posterImgs[this.swiperIndex].url){
|
|
|
+ // imgUrl = this.posterImgs[this.swiperIndex].url;
|
|
|
+ // } else if(this.posterImgs[this.swiperIndex] && this.posterImgs[this.swiperIndex].temporary){
|
|
|
+ // let imgData = await this.$http.qnFileUpload([this.posterImgs[this.swiperIndex].temporary]);
|
|
|
+ // imgUrl = imgData[0];
|
|
|
+ // }else{
|
|
|
+ // let data = await this.createPoster();
|
|
|
+ // let imgData = await this.$http.qnFileUpload([data]);
|
|
|
+ // imgUrl = imgData[0];
|
|
|
+ // }
|
|
|
+ // uni.hideLoading();
|
|
|
+ uni.share({
|
|
|
+ provider: 'weixin',
|
|
|
+ scene: 'WXSceneSession',
|
|
|
+ type: 0,
|
|
|
+ title: this.dataInfo.share.shareTitle,
|
|
|
+ href: this.dataInfo.share.shareUrl,
|
|
|
+ summary: this.dataInfo.share.shareContent,
|
|
|
+ imageUrl: this.dataInfo.share.shareImg,
|
|
|
+ success: function(res) {
|
|
|
+ console.log('success:' + JSON.stringify(res));
|
|
|
+ },
|
|
|
+ fail: function(err) {
|
|
|
+ console.log('fail:' + JSON.stringify(err));
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //页面隐藏
|
|
|
+ onHide() {},
|
|
|
+ //页面卸载
|
|
|
+ onUnload() {},
|
|
|
+ //页面下来刷新
|
|
|
+ onPullDownRefresh() {},
|
|
|
+ //页面上拉触底
|
|
|
+ onReachBottom() {},
|
|
|
+ //用户点击分享
|
|
|
+ onShareAppMessage(e) {
|
|
|
+ let dataInfo = this.dataInfo;
|
|
|
+ let shareInfo = {
|
|
|
+ path: "/pages/home/shop/goodsDetail?objId="+dataInfo.objId,
|
|
|
+ title: dataInfo.share.shareTitle,
|
|
|
+ imageUrl: dataInfo.share.shareImg
|
|
|
+ };
|
|
|
+ if(this.userInfo.token){
|
|
|
+ shareInfo.path += "&recommendCode=" + this.userInfo.uid;
|
|
|
+ }
|
|
|
+ console.log(shareInfo);
|
|
|
+ return shareInfo;
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+
|
|
|
+.poster_page {
|
|
|
+ min-height: 100vh;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.poster_canvas {
|
|
|
+ width: 750rpx;
|
|
|
+ height: 1334rpx;
|
|
|
+ position: fixed;
|
|
|
+ top: -10000rpx;
|
|
|
+ left: 0rpx;
|
|
|
+}
|
|
|
+.poster_swiper {
|
|
|
+ height: 950rpx;
|
|
|
+ width: 100%;
|
|
|
+ swiper-item {
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .goods_info_box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ transform: scale(0.88);
|
|
|
+ transition: all 0.4s;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ &.active {
|
|
|
+ transform: scale(1);
|
|
|
+ }
|
|
|
+ .goods_image {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100vw - 220rpx);
|
|
|
+ }
|
|
|
+ .goods_info {
|
|
|
+ padding: 24rpx;
|
|
|
+ .goods_name {
|
|
|
+ color: #333;
|
|
|
+ font-size: 30rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ .price_box {
|
|
|
+ margin-top: 24rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .price {
|
|
|
+ font-size: 38rpx;
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
+ .store_price {
|
|
|
+ margin-left: 30rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #999;
|
|
|
+ text-decoration: line-through;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .poster_info {
|
|
|
+ border-top: 2rpx solid #f1f1f1;
|
|
|
+ padding-top: 24rpx;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ view {
|
|
|
+ color: #333;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ text {
|
|
|
+ color: #999;
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .poster_code_image {
|
|
|
+ width: 170rpx;
|
|
|
+ height: 170rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.share_save_box {
|
|
|
+ position: fixed;
|
|
|
+ bottom: calc((100vh - 950rpx - 240rpx) / 4);
|
|
|
+ left: 0;
|
|
|
+ z-index: 6;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ button {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ background-color: transparent;
|
|
|
+ image {
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ }
|
|
|
+ text {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.h5_press_save {
|
|
|
+ background-color: #000;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ z-index: 100;
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .download {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ background-color: rgba(0,0,0,0.5);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: center;
|
|
|
+ position: absolute;
|
|
|
+ padding: 5rpx 30rpx;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ bottom: 30rpx;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ &:before {
|
|
|
+ content: '';
|
|
|
+ width: 24rpx;
|
|
|
+ height: 24rpx;
|
|
|
+ margin-right: 15rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
dever