文生圖項目總結

文生圖

功能點

頁面進來獲取背景圖url和圖片寬高（根據比例和手機屏幕處理過的寬高）
渲染圖片（背景圖最后生成圖片模糊，換成img展示解決）
添加多個文字，編輯文字內容，拖拽改變文字位置，刪除文字
編輯文字內容，顏色，字體，大小
生成圖片預覽
轉發圖片給好友、保存

bug點

使用背景圖最后生成圖片模糊，換成img展示解決
圖片必須轉成base64格式，最后才能保存，否則不顯示（例如二維碼和背景圖）

拖拽插件

多個文字框時，點擊改變isActive控制編輯狀態框的顯示隱藏

只保留一個clicked 事件
在外層添加時間.stop 重置數組激活狀態為false

整個頁面分為上中下三部分，中間可滾動

整體100vh ，采用縱向flex布局
上下區域高度不固定，下面樣式設置直接寫，不采用彈窗形式
中間區域 overflow-y: auto；高度超出會自動有滾動條
中間圖片豎圖頂部會遮擋，不能使用center布局即可

解決不同圖片尺寸都要居中顯示，切最后生成圖片又得是圖片區域

采用父盒子 flex：center，內層盒子居中顯示：橫圖可以，超高豎圖頂部會有遮擋；所以判斷豎圖就定義寬90%，高度auto
根據圖片比例動態計算寬高，動態設置內層盒子的寬高；盒子里放圖片和文字
假如是9：16 的圖片，固定一個高度，計算固定寬度；其他比例寬度為手機屏幕寬度，高度計算

刪除其中一個位置會跑到上個位置

拖拽left、top賦值，刪除加個show變量false隱藏，不直接刪除這一項

添加文字后，第一次點擊聚焦拖拽框，文字會移動到左上角的位置

添加文字，給了一個默認left、top值讓文字顯示在中間
但是拖拽組件沒有設置初始偏移量 x、y
保持初始偏移量和添加文字默認位置一致即可解決

vcolorpicker顏色選取插件

切換字體字體包

vue獲取文件夾下所有字體包生成數組：字體包的名字和下拉選擇名字保持一致
類名定義為font-索引值
這樣下拉選中得到索引，動態綁定類名即可切換字體

vue瀑布流插件vue-masonry

第二版小程序

第一版公眾號無法實現轉發圖片給好友，只能分享公眾號；所以修改為小程序
小程序沒有找到拖拽插件，所以打算用uniapp生成小程序
結果uniapp也沒有拖拽插件，最終使用uniapp 嵌入H5頁面（編輯賀卡頁面）
uniapp打包小程序弊端：使用uview插件占內存較大很快就超了2M
于是采用分包，主包只放tabbar頁面，分包可以有多個，但是總限制8M，每個包限制2M
分包可以鍵自己的圖片文件夾和插件
上線要在編輯器上點擊發行，才會運行在生產環境

let url = ''
let url1 = ''
let url2 = ''
if (process.env.NODE_ENV === 'development') {console.log('開發環境')url = 'http://192.168.0.19:9888'url1 = 'http://192.168.2.89:8080'url2 = 'http://192.168.0.19:9888'
} else {console.log('生產環境')url = 'https://wst.maitewang.com/stage-api'url1 = 'https://wst.maitewang.com'url2 = 'https://wst.maitewang.com/stage-api'
}export const baseUrl = url;
export const h5Url = url1;
export const imgUrl = url2;

小程序發布之后，H5會有緩存，大概5個小時左右會更新；小程序24小時會基本更新所有用戶

uniapp 打包小程序并嵌入H5注意事項

小程序里邊嵌入H5 使用 web-view

上線需要配置業務域名，即H5訪問地址
域名必須使用https；域名不能帶端口號；需要下載文件放服務器上
web-view會緩存，修改H5之后，線上不會變；在過一段時間（時間不定，一天或者幾小時，無明顯規律）是可以進行緩存刷新的：有需要的解決
可以ngix配置不緩存html文件，即可解決；還有靜態資源的緩存比較麻煩
將微信從后臺退出再打開并重新進入小程序；

uniapp可以直接調取微信小程序轉發圖片api

轉發有發送朋友和保存相冊功能
發送朋友的圖片下面可以帶小程序的連接，但是對小程序類別有要求，不是所有的都可以
如果類別不符合不能配置轉發帶鏈接，否則轉發功能也會調不起來
上傳、下載功能需要配置上傳下載接口域名

小程序和H5互相跳轉并傳參

小程序跳轉H5直接在鏈接之后?拼接參數
-<web-view class="menu" v-if="query" :src="h5Url+'/#/detail?query='+ query"></web-view>
跳轉參數加密 encodeURIComponent(JSON.stringify(query))
H5在mounted接收參數并解密JSON.parse(decodeURIComponent(this.$route.query.query))
H5跳轉小程序

 let path = `/page_subject/detail/share?imgURL=${path1}&width=${this.width}&height=${this.height}&id=${this.id}`wx.miniProgram.navigateTo({url: path,success() {Toast.clear();},fail() {Toast('跳轉失敗');}, //小程序地址});

小程序右上角三個點的分享小程序默認分享好友和朋友圈都是灰色的

需要寫代碼開啟
如果每個頁面都需要分享，寫一個公共的js文件，采用MiXin 混入的方式

新建公共share.js文件

export default {data() {return {share: {title: '快來一起制作新年賀卡吧~',// bug：require本地圖片分包之后圖片就顯示不出來了// 不設置圖片，默認展示頁面 // imageUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg',path: '/pages/home/index'}}},onLoad: function() {wx.showShareMenu({withShareTicket: true,menus: ["shareAppMessage", "shareTimeline"]})},onShareAppMessage(res) { //發送給朋友return {title: this.share.title,imageUrl: this.share.imageUrl,path: this.share.path}},onShareTimeline(res) { //分享到朋友圈return {title: this.share.title,imageUrl: this.share.imageUrl,path: this.share.path}},
}

main.js文件混入

import share from './common/share.js'
Vue.mixin(share)

頁面內想單獨覆蓋分享的文字和圖片，可在頁面內重寫data

data() {return {share: {title: '快來一起制作新年賀卡吧~',// bug：require本地圖片分包之后圖片就顯示不出來了// 不設置圖片，默認展示頁面 // imageUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg',path: '/pages/home/index'}}},

H5禁止默認的長按轉發事件

給圖片設置 img{ pointer-events:none; }
如果圖片有點擊事件，點擊事件不會觸發，可以將點擊事件加載img的外層盒子上

開啟微信小程序圖片默認長按事件

小程序<image>默認沒有長按識別事件
在圖片標簽上添加屬性 show-menu-by-longpress

圖片列表使用骨架屏

圖片加載過程會出現沒有高度，所以效果不是很好
監聽圖片加載@load，加載之前顯示灰色骨架屏，加載成功顯示圖片
bug：在下拉刷新，重新調取接口后@load不執行
解決：下拉刷新，先清空數組，在重新調取接口

<view v-show="!item.isLoading"></view>
<image v-show="item.isLoading" :src="baseUrl + item.img" @load="imgLoad(index)"></image>
// load回調證明圖片加載完成
imgLoad(index) {this.imgList[index].isLoading = true;
},

首頁關注我們頁面內任意拖動

movable-area 可以放在最外層
movable-view是movable-area的直接子元素
movable-area必須設置寬高，子元素只會在這個區域內移動
movable-area設置寬高會占位置，可以position: absolute就會不占位置
movable-view會隨著頁面向上滾動而上去，使用position: fixed即可不動

<!-- 可拖拽關注 -->
<movable-area :style="{ width:`${screenWidth - 52}px`, height: `${screenHeight - 50}px`}" class="focusBox"><movable-view :x="screenWidth - 52" :y="screenHeight / 2" direction="all" @click="isFocus = true" class="focus"><image src="../../static/icon/focus.png" alt="" class="focusImg"></image></movable-view>
</movable-area>.focusBox {position: absolute;.focus {position: fixed;z-index: 999;.focusImg {width: 112rpx;height: 108rpx;}}

小程序編輯頁面

http://192.168.2.89:8080/#/detail?query=%7B%22url%22%3A%22%2Fprofile%2Fupload%2F2024%2F01%2F25%2F123_20240125204643A031.jpg%22,%22id%22%3A22%7D

<template><view><web-view class="menu" v-if="query" :src="h5Url+'/#/detail?query='+ query"></web-view></view>
</template><script>import {h5Url,} from '../../common/http.js'export default {data() {return {query: '',h5Url: '',}},onLoad(options) {console.log('query', JSON.parse(decodeURIComponent(options.query)))this.query = options.querythis.h5Url = h5Urlconsole.log(1111, this.h5Url + '/#/detail?query=' + this.query)// this.getWidth(url).finally(() => {// 	this.query = encodeURIComponent(JSON.stringify({// 		url: url,// 		width: this.width,// 		height: this.height// 	}))// 	console.log(55555, {// 			url: url,// 			width: this.width,// 			height: this.height// 		},// 		this.query, h5Url + '/#/detail?query=' + this.query)// })},methods: {// 獲取圖片寬高getWidth(url1) {let _this = thisreturn new Promise((resolve, reject) => {let screenWidth = wx.getSystemInfoSync().windowWidth; // 獲取當前窗口的寬度uni.getImageInfo({src: url,success(image) {console.log(222222, image.width, image.height);let imgRate = image.width / image.height;console.log(33333, Number((screenWidth / imgRate).toFixed()));if (imgRate <= 0.5625) {_this.width = 315;_this.height = 560;} else {_this.width = screenWidth;_this.height = Number((screenWidth / imgRate).toFixed());}resolve()},fail(err) {console.log(44444, err)_this.width = 310;_this.height = 551;reject()}});})},}}
</script><style scoped lang="scss"></style>

H5編輯頁面

<template><div class="w100 vh100 flex flex-column bg-black"><div class="flex_r white bg-black w100 pd-30"><img src="../assets/img/share.png" alt="" style="width: 18px;margin-right: 6px;"><div @click="preview">轉發</div></div><div @click.stop="onDeactivated" style="width: 100%; overflow-y: auto;" class="bg-black flex-1"><!-- :style="{ width: `${width}px`, height: `${height}px` }" --><div style="width: 85%;" class="imgBox relative" :class="height > 550 ? 'top' : 'middle'"><img :src="url" alt="" class="w100 h100" style="display: block;pointer-events:none"><div v-for="(item, i) in arr" :key="i"><!-- clicked - 單擊組件時activated - 單擊組件時調用，以顯示句柄deactivated - 用戶單擊組件外部的任何位置時調用，以便將其停用resizing - 組件調整大小時resizestop - 組件停止調整大小時dragging - 拖動組件時dragstop - 組件停止拖動時調用@deactivated="onDeactivated":parentLimitation="true" --><VueDragResize v-if="item.show" :sticks="['mr', 'br', 'bm', 'bl',]" :isActive="item.isEdit" :w="190" :h="80":x="70" :y="200" :z="999" @resizing="resize" @dragging="resize" @clicked="onActivated(i)" contentClass="box":style="{ 'left': item.left + 'px', 'top': item.top + 'px', }"><p class="absolute gushi":style="{ 'color': item.color, 'font-size': item.size + 'px', 'opacity': item.opacity / 100, 'font-family': item.family, 'font-weight': item.bold, }">{{ item.text }}</p></VueDragResize></div><!-- 二維碼 --><img :src="code" alt="" class="absolute code" :class="width < height ? 'center' : 'right'"></div></div><div class="w100 bg-white"><div class="flex bg pd-30 plr-60" :class="isIos ? 'pb-50' : ''" v-show="!index"><div @click="add" class="flex_l"><img src="../assets/img/add.png" alt="" style="width: 16px;height: 16px;"><div class="ml-6">藏頭詩</div></div><div @click="add1" class="flex_l"><img src="../assets/img/add1.png" alt="" style="width: 22px;height: 22px;"><div class="ml-6">添加祝福語</div></div><div @click="changeImg" class="flex_l"><img src="../assets/img/add2.png" alt="" style="width: 22px;height: 22px;"><div class="ml-6">更換背景</div></div></div><div class="flex bg pd-30" v-show="index"><div @click="del" class="mr-20 flex_l"><img src="../assets/img/del.png" alt="" style="width: 18px;height: 18px;"><div class="ml-6">刪除</div></div><div @click="action = 2" :class="action == 2 ? 'red' : ''" class="mr-20 flex_l"><img v-if="action == 2" src="../assets/img/edit-1.png" alt="" style="width: 18px;height: 18px;"><img v-else src="../assets/img/edit.png" alt="" style="width: 18px;height: 18px;"><div class="ml-6">編輯</div></div><div @click="action = 3" :class="action == 3 ? 'red' : ''" class="mr-20 flex_l"><img v-if="action == 3" src="../assets/img/color-1.png" alt="" style="width: 18px;height: 18px;"><img v-else src="../assets/img/color.png" alt="" style="width: 18px;height: 18px;"><div class="ml-6">顏色</div></div><div @click="action = 4" :class="action == 4 ? 'red' : ''" class="mr-20 flex_l"><img v-if="action == 4" src="../assets/img/size-1.png" alt="" style="width: 18px;height: 18px;"><img v-else src="../assets/img/size.png" alt="" style="width: 18px;height: 18px;"><div class="ml-6">樣式</div></div><div v-if="action" @click="finish" class="flex_l"><img src="../assets/img/finish.png" alt="" style="width: 18px;height: 18px;"><div class="ml-6">完成</div></div></div><div class="pd-30 pb-40" v-if="action == 1"><!-- show-word-limit --><van-field v-model.trim="message" placeholder="輸入藏頭詞：例如新年快樂(10字以內)" clearable type="textarea" autosize rows="1"maxlength="10"><template #button><van-button size="small" type="info" class="solo" @click="getPoetry">生成</van-button></template></van-field></div><div class="pd-30 pb-40" v-if="action == 2 || action == 5"><van-field v-model="arr[index].text" placeholder="" clearable type="textarea" autosize rows="1" /></div><div class="pd-30 pb-40" v-if="action == 3"><div class="flex mr-30 mb-30"><div>透明度</div><van-slider v-model="arr[index].opacity" :min="0" :max="100" style="width: 80%;" active-color="#E94467" /></div><div class="flex flex-wrap"><div class="mlr-12 mt-4"><colorPicker v-model="arr[index].color" /></div><div v-for="(  color, indexs  ) in   colors  " :key="indexs" class="color-option":style="{ backgroundColor: color, border: '1px solid #fff5f6' }" @click="selectColor(color)":class="{ active: color === arr[index].color, }"></div></div></div><div class="pd-30 pb-40" v-if="action == 4"><div class="flex mb-30"><div>字體大小</div><van-slider v-model="arr[index].size" :min="10" :max="80" class="flex-1 mlr-30" active-color="#E94467" /><div @click="changeBold(arr[index].bold)" :class="{ 'bold': arr[index].bold == 700 }" class="red">加粗</div></div><div class="flex_l flex-top"><div class="mr-20">選擇字體</div><div style="max-height: 100px;overflow-y: auto;" class="flex-1"><div v-for="(item, i ) in fonts" :key="i" :style="{ 'font-family': 'font-' + (i + 1) }" @click="selectFont(i)":class="{ 'size-42 red': 'font-' + (i + 1) === arr[index].family }" class="mb-10">{{item }}</div></div></div></div><div class="plr-30  pb-40" v-if="action == 5"><div class="flex_l flex-top"><div style="max-height: 100px;overflow-y: auto;" class="flex-1"><div v-for="(  item, i  ) in   texts  " :key="i" @click="selectText(item)":class="{ 'size-36 red': item === arr[index].text }" class="mb-16">{{item }}</div></div></div></div></div><!-- 更換背景圖組件 --><changeImg ref="changeImgRef" @getImg="getImg"></changeImg></div>
</template><script>
import { Toast, Dialog } from 'vant';
import wx from 'weixin-js-sdk';
import VueDragResize from 'vue-drag-resize';
import html2canvas from "html2canvas";
import changeImg from '../components/changeImg.vue';
export default {name: 'app',components: {VueDragResize,changeImg,},data() {return {id: '', //圖片idurl: '', // 背景圖width: 315,height: 560,message: "", //藏頭詩提示語arr: [], // 文字index: '', // 當前編輯的文字索引action: null, // 1 藏頭詩  2 編輯文字  3 顏色  4 樣式  5 添加祝福語//  ['#fff', '#000000', '#F9E0C6', '#F4C68C', '#F08400', '#F08080', '#FFA07A', '#F44336', '#E91E63', '#F012BE', '#9C27B0', '#673AB7', '#7B68EE', '#3F51B5', '#2196F3',//   '#03A9F4', '#00BCD4', '#009688', '#2ECC40', '#4CAF50', '#8BC34A', '#FFEB3B',//   '#FFFF00', '#FFDC00', '#FFC107', '#FF851B','#FF5722', '#795548', '#9E9E9E', '#607D8B'],colors:['#000000', '#FFFFFF', '#F9E0C6', '#FDF6C0', '#F4C68C', '#FFA07A', '#F08080', '#F08400', '#E85500', '#FEC140', '#E6FF00', '#879D13', '#37A75D', '#2ECC40', '#149125','#009688', '#29C2BA', '#298CFE', '#3F51B5', '#7B68EE', '#9C27B0', '#E91E63','#FC0015', '#C00503', '#8A1F01', '#940304',],fonts: [],texts: ['新年快樂', '新春到了，愿你快樂，幸福平安！', '祝你新年快樂，喜事連連！', '恭祝萬事順，幸福不止步', '春節到來之際，送上我最真摯的祝福：新年快樂！','新的一年，祝你永懷善意，清澈明朗，無憂無慮，平安順遂，吉祥圓滿。','新年新氣象，祝福財氣旺，祝君事業有成，合家歡樂，步步高升！','歲杪春臨，辭舊迎新，專此恭祝：吾師尊長，兄姊好友，新歲維祺，萬事勝意。','新的一年，愿你永懷善意，清澈明朗，無憂無慮，平安順遂，吉祥如意。','歲末將至，敬頌冬綏 。平安喜樂，萬事勝意。歲歲常歡愉，年年皆勝意。','日邁月征，朝暮輪轉，愿新年勝舊年，歡愉且勝意，萬事盡可期。','大財，小財，意外財，財源滾滾；親情，友情，愛情，情情如意官運；福運，財運，桃花運，運運亨通。','新的一年，愿你將遇之人皆為摯友，愿你去往之地皆為熱土。天高地闊，萬事勝意。人海滄滄，順遂無憂。','祝你在新的一年里 無疾病侵擾，無歲月白頭，無枯木羈絆。四時春秋平安度過，萬千山水得以一游。','新年到，放鞭炮：一響鴻運照；二響憂愁拋；三響煩惱消；四響財運到；五響收入高；六響身體好；七響心情妙；八響平安罩；九響幸福繞；十響事業節節高！','祈家事平和，花朝月夕多勝意。愿人間芳華，歲歲年年長安康。樂親朋，歲無憂，新春快樂。','裁雪為畫，揉風作詩。愿歲月溫柔，點點滴滴成全人間悲喜；愿你畢生歡愉，朝朝暮暮造就星河奔騰。'],imgURL: '',w: 0,h: 0,code: '', // 二維碼isIos: false,}},mounted() {console.log(this.appSource())this.isIos = Boolean(this.appSource() == 'ios')console.log(JSON.parse(decodeURIComponent(this.$route.query.query)))let query = JSON.parse(decodeURIComponent(this.$route.query.query))this.url = '/stage-api' + query.urlthis.id = query.idthis.getBase64(this.url)let code = require('../assets/img/code.png')this.getBase64Code(code)// 字體//參數：1.路徑；2.是否遍歷子目錄；3.正則表達式const files = require.context("../assets/fonts", true).keys();this.fonts = files.map(item => item.split('-')[1].split('.')[0])console.log(files.map(item => item.split('-')[1].split('.')[0]));// ['思源黑體', '包圖小白體', '峰廣明銳體', '豆豆字體', '站酷慶科黃油體', '銳字真言體', '卓健橄欖簡體', '演示悠然小楷', '優設標題黑', '沐瑤隨心手寫體', '青柳隸書', '演示佛系體', '優設好身體', '優設鯊魚菲特健康體', '阿朱泡泡體', '阿里巴巴普惠體', '龐門正道標題體', '傳奇特戰體', '思源宋體', '清松手寫體', '龔帆免費體', '851力量體', '赤薔薇灰姑娘', '可愛少女體', '胖胖豬肉體', '千圖小兔體']},methods: {//判斷安卓和iosappSource() {const u = navigator.userAgent;const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);if (isiOS) {return "ios";} else {return "android";}},getBase64(src) {var image = new Image();image.crossOrigin = '*'; // 支持跨域圖片image.src = src + '?v=' + Math.random(); // 處理緩存image.onload = () => {var base64 = this.getBase64Image(image);this.url = base64}},getBase64Image(img) {var canvas = document.createElement("canvas");canvas.width = img.width;canvas.height = img.height;var ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0, img.width, img.height);var dataURL = canvas.toDataURL("image/png"); // 可選其他值 image/jpegreturn dataURL;},//  本地二維碼轉base64getBase64Code(imgUrl) {window.URL = window.URL || window.webkitURL;const xhr = new XMLHttpRequest();xhr.open("get", imgUrl, true);xhr.responseType = "blob";xhr.onload = () => {if (xhr.status == 200) {//得到一個blob對象const blob = xhr.response;const oFileReader = new FileReader();oFileReader.readAsDataURL(blob);oFileReader.onloadend = e => {this.code = e.target.result;//base64編碼 };}};xhr.send();},add() {this.action = 1},getPoetry() {if (!this.message) {this.$toast({message: '請輸入藏頭詞'})} else {Toast.loading({message: '生成中...',forbidClick: true,});this.$axios.get('/stage-api/system/management/getMessages?messages=' + this.message).then(res => {console.log(res.msg)if (!res.msg) {Toast.clear();Dialog.alert({title: '溫馨提示',message: '未獲取到相關藏頭，請更換提示語重新生成',}).then(() => {// on close});} else {this.message = ''this.arr.push({text: res.msg,color: '#FFFFFF',size: 24,opacity: 100,family: 'font-3',bold: 400,isEdit: false,show: true,top: 200,left: 70,})this.index = (this.arr.length - 1) + ''this.action = 2Toast.clear();}})}},add1() {this.arr.push({text: '新年快樂',color: '#FFFFFF',size: 28,opacity: 100,family: 'font-12',bold: 400,isEdit: false,show: true,top: 200,left: 70,})this.index = (this.arr.length - 1) + ''this.action = 5},changeImg() {this.$refs.changeImgRef.init()},getImg(query) {this.url = '/stage-api' + query.urlthis.id = query.idthis.getBase64(this.url)},finish() {this.onDeactivated()},del() {this.$set(this.arr[this.index], 'show', false)this.onDeactivated()},selectColor(color) {this.$set(this.arr[this.index], 'color', color)},selectFont(i) {this.$set(this.arr[this.index], 'family', 'font-' + (i + 1))},selectText(item) {this.$set(this.arr[this.index], 'text', item)},changeBold(flag) {this.$set(this.arr[this.index], 'bold', flag == 700 ? 400 : 700)},// 拖拽時可以確定元素位置resize(newRect) {this.w = newRect.width;this.h = newRect.height;this.$set(this.arr[this.index], 'top', newRect.top)this.$set(this.arr[this.index], 'left', newRect.left)},onActivated(i) {console.log('點擊了' + i,)this.arr.forEach((el, index) => {if (index == i) {this.index = i + ''this.$set(this.arr[index], 'isEdit', true)this.action = 2} else {this.$set(this.arr[index], 'isEdit', false)}});},onDeactivated() {this.index = nullthis.action = nullthis.arr.forEach((el, index) => {this.$set(this.arr[index], 'isEdit', false)});},preview() {this.onDeactivated()Toast.loading({message: '生成中...',forbidClick: true,loadingType: 'spinner',});setTimeout(() => {html2canvas(document.querySelector('.imgBox'), {backgroudColor: null,scale: 3, // 1125}).then(canvas => {let imgUrl = canvas.toDataURL('image/png');// console.log(imgUrl);this.imgURL = imgUrl;   //base64格式// 構建FormData對象,通過該對象存儲要上傳的文件const formData = new FormData();// 遍歷當前臨時文件List,將上傳文件添加到FormData對象中formData.append('baseName', this.imgURL);this.$axios.post('/stage-api/system/management/upload', formData).then(res => {console.log(88877, res.fileName)let path1 = res.fileNamelet path = `/page_subject/detail/share?imgURL=${path1}&width=${this.width}&height=${this.height}&id=${this.id}`wx.miniProgram.navigateTo({url: path,success() {Toast.clear();},fail() {Toast('跳轉失敗');}, //小程序地址});}).catch(err => {console.log(999, err)})})}, 100);},}
}
</script>
<style scoped lang="scss">
.imgBox {// margin-left: 30px;background: #000 url('') no-repeat center center;background-size: 100% 100%;&.top {left: 50%;top: 0%;transform: translateX(-50%);}&.middle {left: 50%;top: 50%;transform: translate(-50%, -50%);}
}.color-option {width: 60px;height: 60px;margin: 8px;border-radius: 50%;
}.color-option.active {border: 2px solid #FFFFFF;
}::v-deep .m-colorPicker .colorBtn {width: 50px;height: 50px;
}::v-deep .box .vdr-stick {width: 35px !important;height: 35px !important;// background: #E94467;border: 1px solid #fff;border-radius: 50%;background: linear-gradient(221.12deg, #FB3568 0%, #FF8B6B 100%);&.vdr-stick-br {bottom: -16px !important;right: -15px !important;}&.vdr-stick-mr {right: -15px !important;}&.vdr-stick-bm {bottom: -16px !important;}&.vdr-stick-bl {bottom: -16px !important;}
}img.code {width: 100px;height: 100px;bottom: 20px;&.right {width: 100px;height: 100px;right: 20px;}&.center {left: 50%;transform: translateX(-50%);}
}.van-cell {border: 1px solid #ccc;
}::v-deep.m-colorPicker {border: 1px solid #ccc;
}.gushi {animation: test 2s;left: 0;top: 0;
}@keyframes test {0% {left: 0px;top: 1000px;}50% {transform: scale(1.5);left: 0px;bottom: 300px;}// 100% {//   left: 0;//   top: 0;// }
}::v-deep .solo.van-button--info {color: #fff;background-color: #E94467;border: 1px solid #E94467;
}
</style>