Commit 9a899114 authored by zhoucong's avatar zhoucong

vlog视频完成

parent fd416b15
<template>
<view >
<!-- #ifdef MP-ALIPAY -->
<!-- <view class="top">
<view class="top-search">
</view>
......@@ -10,6 +9,7 @@
<image src="../../static/img/index/classify1.png"></image>
<view>景区门票</view>
</navigator>
</view>
<view>
<navigator url="../hotel/hotel">
......@@ -63,14 +63,11 @@
<view class="top-img">
</view>
</view> -->
<!--#endif-->
<!-- <button @click="getUserInfo()"> 授权获取头像昵称 </button> -->
<!-- <text @click="getUserInfo()"> 授权获取头像昵称 </text> -->
<view class="bottom">
<navigator url="../vlog/vlogIndex/vlogIndex">
<button type="default">vlog</button>
</navigator>
<!-- <web-view src="https://wx.pangdly.com"></web-view> -->
<web-view :src="outUrl"></web-view>
</view>
</view>
</template>
......@@ -79,11 +76,15 @@
export default {
data() {
return {
outUrl:"",//跳出地址
}
},
onLoad() {
onLoad(){
let pdOpenid=uni.getStorageSync("openid")//胖丁小程序openid,临时用,当公众号授权做好之后可以删除
let pdToken=uni.getStorageSync("token")
let pdCreateUserId=uni.getStorageSync("createUserId")
let pdUserId=uni.getStorageSync("userId")
this.outUrl="https://wx.pangdly.com/#/home?pdOpenid="+pdOpenid+"&pdToken="+pdToken+"&pdCreateUserId="+pdCreateUserId+"&pdUserId="+pdUserId
},
methods: {
getUserInfo() { // 获取用户信息
......
......@@ -2,28 +2,13 @@
<view class="content">
<view v-if="vlogList.length>0 && show===false" class="noEmpty">
<view style="height: 20rpx;"></view>
<u-search bg-color="#434957" color="#ffffff" placeholder="景区/关键词搜索" v-model="search" :clearabled="true" @search="query" :show-action="false" ></u-search>
<u-search bg-color="#434957" color="#ffffff" placeholder="景区/关键词搜索" v-model="search" :clearabled="true"
@search="query" :show-action="false"></u-search>
<view class="body">
<navigator url="../vlogList/vlogList" class="item">
<image src="https://cdn.uviewui.com/uview/swiper/2.jpg" mode=""></image>
<text>长江索道</text>
</navigator>
<navigator url="../vlogList/vlogList" class="item">
<image src="https://cdn.uviewui.com/uview/swiper/2.jpg" mode=""></image>
<text>长江索道</text>
</navigator>
<navigator url="../vlogList/vlogList" class="item">
<image src="https://cdn.uviewui.com/uview/swiper/2.jpg" mode=""></image>
<text>长江索道</text>
</navigator>
<navigator url="../vlogList/vlogList" class="item">
<image src="https://cdn.uviewui.com/uview/swiper/2.jpg" mode=""></image>
<text>长江索道</text>
</navigator>
<navigator url="../vlogList/vlogList" class="item">
<image src="https://cdn.uviewui.com/uview/swiper/2.jpg" mode=""></image>
<text>长江索道</text>
</navigator>
<view class="item" v-for="(item,index) in vlogList" :key="index" @click="navTo(item)">
<image :src="item.thumbImageUrl" mode="widthFix"></image>
<text>{{item.merchantName}}</text>
</view>
</view>
</view>
<view v-else-if="vlogList.length===0 && show===false" class="empty">
......@@ -35,7 +20,7 @@
<view>点击获取我的Vlog</view>
</navigator>
</view>
<view v-else ></view>
<view v-else></view>
</view>
</template>
......@@ -43,18 +28,27 @@
export default {
data() {
return {
show:true,//显示默认页面
vlogList:[],//我的vlog集合
show: true, //显示默认页面
vlogList: [], //我的vlog集合
}
},
onReady() {
onReady() {},
onLoad() {
this.getMyVlogList()
},
onLoad(){
setTimeout(res=>{
this.vlogList=[1]//模拟请求数据
if(this.vlogList.length>0){//如果有数据
this.show=false
uni.setNavigationBarColor({//动态更改导航条颜色
methods: {
navTo(item){
this.$u.route('/pages/vlog/vlogList/vlogList?merchantId='+item.merchantId);
},
getMyVlogList(){
this.$request("wechatUser/myPage/getVlogRecord", {
openid: uni.getStorageSync("openid")
}).then(res => {
if(res.code==="00"){
this.vlogList = res.data
if (this.vlogList.length > 0) { //如果有数据
this.show = false
uni.setNavigationBarColor({ //动态更改导航条颜色
frontColor: '#ffffff',
backgroundColor: '#192033',
animation: {
......@@ -62,15 +56,16 @@
timingFunc: 'easeIn'
}
})
uni.setBackgroundColor({backgroundColor:"#192033"});
}else{//数据为空
this.show=false
uni.setBackgroundColor({
backgroundColor: "#192033"
});
} else { //数据为空
this.show = false
}
},1)
}
})
},
methods: {
query(e){
query(e) {
console.log(e)
},
}
......@@ -78,23 +73,82 @@
</script>
<style lang="scss" scoped>
.content{height: 100%;width: 100%;text-align: center;
.noEmpty{color:#fff;height: 100%;width: 100%;background-color: #192033;padding: 0 20rpx;
.body{width: 100%;display: flex;flex-wrap: wrap;justify-content: space-between;margin-top: 30rpx;
.item{width: 49%;height: 250rpx;margin-top: 20rpx;
image{width: 100%;height: 80%;border-radius: 10rpx;}
text{font-weight: bold;}
.content {
height: 100%;
width: 100%;
text-align: center;
.noEmpty {
color: #fff;
height: 100%;
width: 100%;
background-color: #192033;
padding: 0 20rpx;
.body {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 30rpx;
.item {
width: 49%;
height: 250rpx;
margin-top: 20rpx;
image {
width: 100%;
height: 80%;
border-radius: 10rpx;
}
text {
font-weight: bold;
}
}
}
.empty {height: 100%;width: 100%;background-color: #fff;padding: 0 20rpx;text-align: center;padding-top: 30rpx;
.row {height: 200rpx;background: linear-gradient(90deg, #ECF5FF 0%, #CEE5FF 100%);line-height: 200rpx;border-radius: 10rpx;margin-bottom: 300rpx;
text {font-weight: bold;font-size: 32rpx;float: left;margin-left: 120rpx;}
image {height: 180rpx;width: 200rpx;float: right;margin-right: 50rpx;}
}
.btnn {display: inline-block;font-size: 28rpx;border-radius: 40rpx;background-color: #FFE600;padding: 20rpx 40rpx;margin: 30rpx 0;font-weight: bold;
.empty {
height: 100%;
width: 100%;
background-color: #fff;
padding: 0 20rpx;
text-align: center;
padding-top: 30rpx;
.row {
height: 200rpx;
background: linear-gradient(90deg, #ECF5FF 0%, #CEE5FF 100%);
line-height: 200rpx;
border-radius: 10rpx;
margin-bottom: 300rpx;
text {
font-weight: bold;
font-size: 32rpx;
float: left;
margin-left: 120rpx;
}
image {
height: 180rpx;
width: 200rpx;
float: right;
margin-right: 50rpx;
}
}
.btnn {
display: inline-block;
font-size: 28rpx;
border-radius: 40rpx;
background-color: #FFE600;
padding: 20rpx 40rpx;
margin: 30rpx 0;
font-weight: bold;
}
}
}
</style>
<template>
<view class="content">
<view style="padding-top: 30rpx;">
<block v-for="(item,index) in scenic.vlogSamples" :key="index">
<block>
<view class="item">
<video class="video" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4" @error="error" controls @play="playing(1)" id="d1"></video>
<video class="video" :poster="scenic.coverImgUrl" :src="scenic.showVideoUrl" play-btn-position="center" @error="error" controls></video>
<view class="title">
<text>[ 样片1 ]</text>
<button class="btnn" open-type="share"><u-icon name="share"></u-icon></button>
<text>[ {{scenic.name || ""}} ]</text>
<view>
<u-icon name="eye-fill" class="icon" color="#ffffff" size="40rpx"></u-icon><text style="color: #ffffff;">10W+</text>
</view>
</view>
</view>
</block>
......@@ -26,7 +28,7 @@
export default {
data() {
return {
scenic:"",//景区详情
scenic:{},//景区详情
}
},
onReady() {//代替 vue 里面的 mounted
......@@ -35,6 +37,7 @@
let caseId=res.caseId
this.$request("distribution/vlog/getScenicInfo",{caseId}).then(res=>{
if(res.code==="00"){
console.log(res);
this.scenic=res.data;
uni.setNavigationBarTitle({title:this.scenic.name})
}
......@@ -44,30 +47,17 @@
error(e){//视频播放出错触发函数
uni.showModal({content: e.target.errMsg,showCancel: false})
},
playing(e) {
if(e===1){uni.createVideoContext("d2").pause()}else{uni.createVideoContext("d1").pause()}
// let trailer = this.video_list;
// trailer.forEach(function(item, index) { // 获取json对象并遍历, 停止非当前视频
// if (item.videoUrl != null && item.videoUrl != "") {
// let temp = item.pgcId;
// if (temp != currentId) {
// uni.createVideoContext(temp).pause(); //暂停视频播放事件
// }
// }
// })
}
}
}
</script>
<style lang="scss" scoped>
.content{padding: 0 20rpx;height: 100%;width: 100%;background-color: #192033;
.content{padding: 0 20rpx;min-height: 100%;width: 100%;background-color: #192033;
.item{box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);padding: 0 10rpx;border-radius: 10rpx;background-color: #192033;margin-bottom:30rpx;text-align: center;
.video{height: 350rpx;border-radius: 10rpx;width: 100%;}
.title{height: 60rpx;margin-top: 20rpx;
text{float: left;height: 60rpx;line-height: 60rpx;color: #FFE600;font-weight: bold;}
.btnn{height: 60rpx;width: 60rpx;line-height: 60rpx;float: right;text-align: center;padding: 0;margin: 0;background-color: #192033;color: #fff;
}
view{float: right;height: 60rpx;line-height: 60rpx;align-items: center;display: flex;}
}
}
......
This diff is collapsed.
<template>
<view class="content">
<view style="padding-top: 30rpx;">
<view class="item">
<video class="video" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
@error="error" controls @play="playing(1)" id="d1"></video>
<view class="item" v-for="(item,index) in myVlogList" :key="index">
<video class="video" :src="item.productUrl" :poster="item.thumbImageUrl" @error="error" controls
play-btn-position="center" :id="index" @play="playing(index)"></video>
<view class="">
<button class="btnn" open-type="share">分享下载</button>
<button v-if="item.shareNumber===4" :data-productUrl="item.productUrl" :data-productId="item.productId" class="btnn"
open-type="share">分享下载</button>
<button v-else class="btnn" @click="handleDownload">下载视频</button>
<text class="price">¥<text>0</text></text>
</view>
<view style="clear: both;">
</view>
</view>
<view class="item">
<video class="video" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
@error="error" controls @play="playing(2)" id="d2"></video>
<view class="">
<button class="btnn" open-type="share">下载</button>
<text class="price">¥<text>5</text></text>
</view>
<view style="clear: both;"></view>
</view>
</view>
</view>
......@@ -29,47 +21,88 @@
data() {
return {
share1: 0,
src: ""
myVlogList: [], //我的视频列表
merchantId: "", //景区id
}
},
onLoad(options) {},
onLoad(options) {
this.merchantId = options.merchantId
this.getMyVlogList()
},
onShow() {
if (this.share1 === 1) {
console.log("分享了");
}
},
onUnload() { //退出页面
},
onHide() {},
onReady() {},
onShareAppMessage(res) { //发送给朋友
console.log(res);
onShareAppMessage(res) { //分享
let productId = res.target.dataset.productid
let productUrl= res.target.dataset.producturl
this.$request("wechatUser/myPage/updateVlogRecord", {
productId,
openid: uni.getStorageSync("openid")
}).then(res => {
if (res.code === "00") {
this.getMyVlogList()
}
})
if (res.from === "button") {
this.share1 = 1
return {
title: '胖丁旅',
title: '胖丁旅',
type: 4,
path: '/pages/vlog/share/share?url=https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4',
path: '/pages/vlog/share/share?url='+productUrl,
}
}
},
methods: {
getMyVlogList() { //获取景区vlog列表
this.$request("wechatUser/myPage/getVlogRecord", {
openid: uni.getStorageSync("openid")
}).then(res => {
if (res.code === "00") {
res.data.forEach(item => { //获取当前景区视频列表
if (this.merchantId === item.merchantId) {
this.myVlogList = item.vlogList
}
})
}
})
},
playing(e) { //控制只播放当前video
this.myVlogList.forEach((item, index) => {
if (e !== index) {
uni.createVideoContext(index.toString()).pause()
}
})
},
handleDownload() { // 下载功能
uni.showLoading({title:"下载中",mask:true})
let fileName = new Date().valueOf();//获取时间戳
uni.downloadFile({//下载文件资源到本地
url: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4',
filePath: wx.env.USER_DATA_PATH + '/' + fileName + '.mp4',//filePath指定文件下载后存储的路径,wx.env.USER_DATA_PATH,时间戳为文件名
success: res => {//下载到本地成功
uni.showLoading({
title: "下载中",
mask: true
})
let fileName = new Date().valueOf(); //获取时间戳
uni.downloadFile({ //下载文件资源到本地
url: 'https://idst-video-img.oss-cn-hangzhou.aliyuncs.com/414ef566a39247159965f355043b379b/minio_service/mgc-video-store/mix/2021-08-31/concat/7c4d09c044b84893959cb541e0c48d38.mp4',
filePath: wx.env.USER_DATA_PATH + '/' + fileName +
'.mp4', //filePath指定文件下载后存储的路径,wx.env.USER_DATA_PATH,时间戳为文件名
success: res => { //下载到本地成功
let filePath = res.filePath;
uni.saveVideoToPhotosAlbum({//保存视频到系统相册。
uni.saveVideoToPhotosAlbum({ //保存视频到系统相册。
filePath,
success: file => {//保存成功
success: file => { //保存成功
//删除本地缓存
let fileMgr = uni.getFileSystemManager();
fileMgr.unlink({
filePath: wx.env.USER_DATA_PATH + '/' + fileName + '.mp4',
filePath: wx.env.USER_DATA_PATH + '/' + fileName +
'.mp4',
})
uni.showToast({
title: "下载成功",
icon: "success",
mask: true
})
uni.showToast({title:"下载成功",icon:"success",mask:true})
},
fail: err => {
uni.hideLoading();
......@@ -83,10 +116,21 @@
//打开权限设置
uni.openSetting({
success: setting => {
if (setting.authSetting['scope.writePhotosAlbum']) {
uni.showModal({title: '提示',content: '获取权限成功,再次点击下载即可保存',showCancel: false,})
if (setting
.authSetting[
'scope.writePhotosAlbum'
]) {
uni.showModal({
title: '提示',
content: '获取权限成功,再次点击下载即可保存',
showCancel: false,
})
} else {
uni.showModal({title: '提示',ontent: '获取权限失败,将无法保存到相册哦',showCancel: false})
uni.showModal({
title: '提示',
ontent: '获取权限失败,将无法保存到相册哦',
showCancel: false
})
}
},
})
......@@ -96,10 +140,14 @@
}
})
},
fail: err => {//下载失败
fail: err => { //下载失败
uni.hideLoading();
if (err.errMsg == 'downloadFile:fail createDownloadTask:fail url not in domain list') {
uni.showToast({title: '服务器错误,请联系相关管理员',icon: 'none',mask:true})
uni.showToast({
title: '服务器错误,请联系相关管理员',
icon: 'none',
mask: true
})
}
}
})
......@@ -110,30 +158,55 @@
showCancel: false
})
},
playing(e) {
if (e === 1) {
uni.createVideoContext("d2").pause()
} else {
uni.createVideoContext("d1").pause()
}
}
}
}
</script>
<style lang="scss" scoped>
.content {padding: 0 20rpx;height: 100%;width: 100%;text-align: center;background-color: #192033;
.content {
padding: 0 20rpx;
min-height: 100%;
width: 100%;
text-align: center;
background-color: #192033;
.item {
box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
padding: 0 10rpx;
border-radius: 10rpx;
background-color: #192033;
margin-bottom: 40rpx;
.video {height: 350rpx;border-radius: 10rpx;width: 100%;}
view{margin: 20rpx 0;
.btnn {float: left;width: 150rpx; background-color: #CCCCCA;font-weight: bold;border-radius: 30rpx;line-height: 30rpx;font-size: 24rpx;padding: 10rpx 15rpx;}
.price{float: right;color: #DE6F26;font-size: 22rpx;
text{font-size: 32rpx;margin-left: 5rpx;font-weight: bold;}
padding-bottom: 40rpx;
.video {
height: 350rpx;
border-radius: 10rpx;
width: 100%;
}
view {
margin: 20rpx 0;
.btnn {
float: left;
width: 150rpx;
background-color: #FFE600;
font-weight: bold;
border-radius: 30rpx;
line-height: 30rpx;
font-size: 24rpx;
padding: 10rpx 15rpx;
}
.price {
float: right;
color: #DE6F26;
font-size: 22rpx;
text {
font-size: 32rpx;
margin-left: 5rpx;
font-weight: bold;
}
}
}
}
......
......@@ -9,8 +9,8 @@
</view>
<image class="photo" v-show="src" :src="src"></image>
<view class="hint">
<u-icon name="error-circle"></u-icon>
没有检测到人脸,请正对拍摄框拍摄哦~
<!-- <u-icon name="error-circle"></u-icon>
没有检测到人脸,请正对拍摄框拍摄哦~ -->
</view>
<view class="hint1">
<view class="item">
......@@ -33,7 +33,7 @@
<view>不遮挡面部</view>
</view>
</view>
<u-button type="success" size="medium" @click="scanFace" >重新拍摄</u-button>
<u-button v-if="buttonShow" type="success" size="medium" @click="scanFace">开始识别</u-button>
</view>
</template>
......@@ -41,40 +41,88 @@
export default {
data() {
return {
src:"",//照片
text:3,//倒计时
show:true
src: "", //照片
text: 3, //倒计时
show: false, //摄像头倒计时文本
base64: "", //照片base64
buttonShow: true
}
},
onLoad(){//代替 vue 里面的 created
onLoad() { //代替 vue 里面的 created
},
onReady() {//代替 vue 里面的 mounted
this.takePhoto()
onReady() { //代替 vue 里面的 mounted
},
methods: {
takePhoto(){//扫脸
var test = setInterval(()=>{
this.text=this.text-1;
if(this.text===-1){
query() { //人脸查询
uni.showLoading({
title: '人脸识别中'
});
let data = {
caseId: "a124Jj6IYiSzCjVV", //景区id
userId: uni.getStorageSync("openid"), //用户id
faceImgData: this.base64, //人脸图片base64编码
optimalFramesNum: 3, //最优帧数量(默认填3就行)
enableImgBeauty: true //默认填true
}
this.$request("distribution/vlog/createVlog", data).then(res => {
if (res.code == "00") {
setTimeout(() => {
this.$request("distribution/vlog/getVlogCreateInfo", {
userId: uni.getStorageSync("openid")
}).then(res => {
if (res.code == "00") {
uni.hideLoading()
uni.showToast({
title: '识别成功',
duration: 1500
});
this.$u.route("pages/vlog/myVlog/myVlog")
} else {
uni.hideLoading()
uni.showModal({
title: '提示',
content: '识别失败,请重新扫脸',
showCancel:false
});
this.buttonShow = true
}
})
}, 8000)
}
})
},
takePhoto() { //扫脸
var test = setInterval(() => {
this.text = this.text - 1;
if (this.text === -1) {
clearTimeout(test)
this.show=false
this.show = false
const ctx = uni.createCameraContext();
ctx.takePhoto({
quality: 'high',
success: (res) => {
this.src = res.tempImagePath
uni.getFileSystemManager().readFile({ //图片转base64
filePath: res.tempImagePath, //选择图片返回的相对路径
encoding: 'base64', //编码格式
success: res => { //成功的回调
this.base64 = "data:image/jpeg;base64," + res.data
this.query()
}
})
}
});
}
},1000)
}, 1000)
},
error(e) {//相机报错
error(e) { //相机报错
console.log(e.detail);
},
scanFace(){//重新扫脸
this.src="";
this.text=3;
this.show=true;
scanFace() { //重新扫脸
this.buttonShow = false
this.src = "";
this.text = 3;
this.show = true;
this.takePhoto()
}
}
......@@ -82,19 +130,95 @@
</script>
<style lang="scss" scoped>
.content{padding: 0 20rpx;height: 100%;width: 100%;text-align: center;
.d1{width: 500rpx;height: 500rpx;border-radius: 50%;background-color: #CEE5FF;position: absolute;top: 150rpx;left: 50%;transform: translate(-40%)}
.d2{width: 500rpx;height: 500rpx;border-radius: 50%;background-color: #ECF5FF;position: absolute;top: 150rpx;left: 50%;transform: translate(-60%)}
.camera{width: 500rpx;height: 500rpx;border-radius: 50%;position: absolute;top: 150rpx;left: 50%;transform: translate(-50%)}
.surface{width: 500rpx;height: 500rpx;border-radius: 50%;position: absolute;top: 150rpx;left: 50%;transform: translate(-50%);text-align: center;font-size: 40rpx;color: #fff;
view{margin: 100rpx 0;}
text{font-size: 70rpx;}
}
.photo{width: 500rpx;height: 500rpx;border-radius: 50%;position: absolute;top: 150rpx;left: 50%;transform: translate(-50%)}
.hint{color: red;padding-top: 680rpx;}
.hint1{height: 300rpx;display: flex;justify-content: space-between;padding-top: 50rpx;
.item{width: 30%;text-align: center;}
image{height: 60rpx;width: 60rpx;}
.content {
padding: 0 20rpx;
height: 100%;
width: 100%;
text-align: center;
.d1 {
width: 500rpx;
height: 500rpx;
border-radius: 50%;
background-color: #CEE5FF;
position: absolute;
top: 150rpx;
left: 50%;
transform: translate(-40%)
}
.d2 {
width: 500rpx;
height: 500rpx;
border-radius: 50%;
background-color: #ECF5FF;
position: absolute;
top: 150rpx;
left: 50%;
transform: translate(-60%)
}
.camera {
width: 500rpx;
height: 500rpx;
border-radius: 50%;
position: absolute;
top: 150rpx;
left: 50%;
transform: translate(-50%)
}
.surface {
width: 500rpx;
height: 500rpx;
border-radius: 50%;
position: absolute;
top: 150rpx;
left: 50%;
transform: translate(-50%);
text-align: center;
font-size: 40rpx;
color: #fff;
view {
margin: 100rpx 0;
}
text {
font-size: 70rpx;
}
}
.photo {
width: 500rpx;
height: 500rpx;
border-radius: 50%;
position: absolute;
top: 150rpx;
left: 50%;
transform: translate(-50%)
}
.hint {
color: red;
padding-top: 680rpx;
}
.hint1 {
height: 300rpx;
display: flex;
justify-content: space-between;
padding-top: 50rpx;
.item {
width: 30%;
text-align: center;
}
image {
height: 60rpx;
width: 60rpx;
}
}
}
</style>
[0817/091631:ERROR:tcp_socket_win.cc(647)] closesocket: 应用程序没有调用 WSAStartup,或者 WSAStartup 失败。 (0x276D)
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment