25 changed files with 1007 additions and 342 deletions
@ -0,0 +1,176 @@ |
|||||
|
<template> |
||||
|
<view class="pagebox"> |
||||
|
<view class="vidoepart"> |
||||
|
<video class="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" |
||||
|
@error="videoErrorCallback"></video> |
||||
|
</view> |
||||
|
<view class="main"> |
||||
|
<text class="title">小白投资避坑指南</text> |
||||
|
<view class="peopnum"> |
||||
|
<view class="left"> |
||||
|
<image style="width: 26rpx;height: 28rpx;" src="@/static/img/gkrs.png" mode=""></image> |
||||
|
<text class="txt">观看人数：</text> |
||||
|
<text class="num">200</text> |
||||
|
</view> |
||||
|
<view class="left"> |
||||
|
<image style="width: 28rpx;height: 28rpx;" src="@/static/img/scrs.png" mode=""></image> |
||||
|
<text class="txt">观看人数：</text> |
||||
|
<text class="num">200</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<text class="title">小白投资避坑指南</text> |
||||
|
<text class="message">小白必看！新手如何炒股票不被割韭菜？/书单推荐/股票基金避坑/理财课靠谱吗？ 视频文字版本的介绍内容，视频文字版本的介绍内容视频文字版本的介绍内容视频文字版本的介绍内容视频文字版本的介绍内容视频文字版本…</text> |
||||
|
<view class="shqy"> |
||||
|
<view class="head"> |
||||
|
<image style="width: 12rpx;height: 32rpx;" src="@/static/img/shqy.png" mode=""></image> |
||||
|
<text class="text">适合企业</text> |
||||
|
</view> |
||||
|
<view class="cards"> |
||||
|
<view class="card"> |
||||
|
<text class="lcxb">理财小白</text> |
||||
|
<text class="bz">不知道从何入手</text> |
||||
|
</view> |
||||
|
<view class="card"> |
||||
|
<text class="lcxb">理财小白</text> |
||||
|
<text class="bz">不知道从何入手</text> |
||||
|
</view> |
||||
|
<view class="card"> |
||||
|
<text class="lcxb">理财小白</text> |
||||
|
<text class="bz">不知道从何入手</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
|
||||
|
const videoErrorCallback = (e) => { |
||||
|
uni.showModal({ |
||||
|
content: e.target.errMsg, |
||||
|
showCancel: false |
||||
|
}) |
||||
|
} |
||||
|
onLoad((param) => { |
||||
|
console.log(param); |
||||
|
}) |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.pagebox { |
||||
|
height: 100vh; |
||||
|
.vidoepart { |
||||
|
.myVideo { |
||||
|
width: 100vw; |
||||
|
} |
||||
|
} |
||||
|
.main { |
||||
|
padding: 30rpx 40rpx; |
||||
|
box-sizing: border-box; |
||||
|
.peopnum { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
.left { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
.txt { |
||||
|
margin-left: 8rpx; |
||||
|
font-family: Source Han Sans; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 350; |
||||
|
text-align: justify; /* 浏览器可能不支持 */ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
letter-spacing: normal; |
||||
|
/* 观看人数： */ |
||||
|
color: #858494; |
||||
|
} |
||||
|
.num { |
||||
|
font-family: Source Han Sans; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 350; |
||||
|
text-align: justify; /* 浏览器可能不支持 */ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
letter-spacing: normal; |
||||
|
/* 观看人数： */ |
||||
|
color: #007FFF; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.shqy { |
||||
|
display: grid; |
||||
|
.head { |
||||
|
margin-top: 48rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
.text { |
||||
|
margin-left: 18rpx; |
||||
|
font-family: Source Han Sans; |
||||
|
font-size: 30rpx; |
||||
|
font-weight: 350; |
||||
|
text-align: justify; /* 浏览器可能不支持 */ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
letter-spacing: normal; |
||||
|
color: #0072FF; |
||||
|
} |
||||
|
} |
||||
|
.cards { |
||||
|
margin-top: 32rpx; |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
gap: 20rpx; |
||||
|
.card { |
||||
|
flex: 0 1 calc(50% - 10rpx); |
||||
|
width: 45%; |
||||
|
height: 144rpx; |
||||
|
border-radius: 24rpx; |
||||
|
background: #FAFDFF; |
||||
|
box-sizing: border-box; |
||||
|
border: 8rpx solid #DBEDFF; |
||||
|
display: grid; |
||||
|
justify-items: center; |
||||
|
align-items: center; |
||||
|
.lcxb { |
||||
|
font-family: Source Han Sans; |
||||
|
font-size: 30rpx; |
||||
|
font-weight: normal; |
||||
|
letter-spacing: normal; |
||||
|
color: #007FFF; |
||||
|
} |
||||
|
.bz { |
||||
|
font-family: Source Han Sans; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 350; |
||||
|
line-height: 32rpx; |
||||
|
letter-spacing: normal; |
||||
|
color: #858494; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.title { |
||||
|
font-family: Source Han Sans; |
||||
|
font-size: 36rpx; |
||||
|
font-weight: 350; |
||||
|
line-height: 100rpx; |
||||
|
letter-spacing: normal; |
||||
|
color: #0C092A; |
||||
|
} |
||||
|
.message { |
||||
|
font-family: Source Han Sans; |
||||
|
font-size: 30rpx; |
||||
|
font-weight: 300; |
||||
|
text-align: justify; /* 浏览器可能不支持 */ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
letter-spacing: normal; |
||||
|
color: #3D3D3D; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -1,27 +1,338 @@ |
|||||
<template> |
<template> |
||||
<view class="container"> |
<view class="container"> |
||||
|
<view class="xxqd"> |
||||
|
<view class="head"> |
||||
|
你的学习清单 |
||||
|
</view> |
||||
|
<view class="main"> |
||||
|
<view class="text"> |
||||
|
距离上次学习已经 |
||||
|
<text class="hongzi"> 6</text>天 |
||||
|
<text class="hongzi"> 20</text>时 |
||||
|
<text class="hongzi"> 38</text>分 |
||||
|
</view> |
||||
|
<view class="xxls"> |
||||
|
<view class="xxone" v-for="(item,index) in xxList" :key="index" @click="xxClick(item)"> |
||||
|
<image style="width: 100%;height: 238rpx;border-radius: 16rpx;" :src="item.img" mode=""></image> |
||||
|
<view class="xxjd"> |
||||
|
已学{{item.xxjd}}% |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<u-tabs :list="tabList" :lineWidth="34" :lineHeight="4" lineColor="#007FFF" |
||||
|
:activeStyle="{color: '#0C092A',fontWeight: '600',fontSize: '34rpx'}" |
||||
|
:inactiveStyle="{color: '#858494',fontWeight: '350',fontSize: '30rpx'}" @click="tabClick"></u-tabs> |
||||
|
<u-search @search="search" @clickIcon="clickIcon" shape="square" placeholder="请输入搜索内容" |
||||
|
placeholderColor="#088cff" v-model="keyword" searchIcon="/static/img/search.png" searchIconSize="14" |
||||
|
:showAction="false" height="40" margin="40rpx 24rpx 24rpx 24rpx"></u-search> |
||||
|
|
||||
|
<view class="KClist"> |
||||
|
<view class="kcone" v-for="(item,index) in kcList" :key="index" @click="kcClick(item)"> |
||||
|
<image class="img" :src="item.img" mode=""></image> |
||||
|
<view class="right"> |
||||
|
<text class="title">{{item.title}}</text> |
||||
|
<text class="txt">{{item.txt}}</text> |
||||
|
<view class="bottompart"> |
||||
|
<text class="gtsy">{{item.gtsy}}</text> |
||||
|
<text class="data">{{item.data}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
</view> |
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script setup> |
<script setup> |
||||
import { ref, watch } from 'vue' |
import { |
||||
|
ref, |
||||
|
watch |
||||
|
} from 'vue' |
||||
|
|
||||
|
const xxList = ref([{ |
||||
|
id: 0, |
||||
|
img: '/static/img/sl4.png', |
||||
|
xxjd: 50 |
||||
|
}, |
||||
|
{ |
||||
|
id: 1, |
||||
|
img: '/static/img/sl4.png', |
||||
|
xxjd: 30 |
||||
|
}, |
||||
|
{ |
||||
|
id: 1, |
||||
|
img: '/static/img/sl4.png', |
||||
|
xxjd: 30 |
||||
|
} |
||||
|
]) |
||||
|
|
||||
|
const tabList = ref([{ |
||||
|
name: '推荐' |
||||
|
}, |
||||
|
{ |
||||
|
name: '视频课' |
||||
|
}, |
||||
|
{ |
||||
|
name: '图文课' |
||||
|
} |
||||
|
]) |
||||
|
|
||||
|
const kcList = ref([{ |
||||
|
img: '/static/img/sl5.png', |
||||
|
title: '课程标题标题标题', |
||||
|
txt: '小白必看！新手如何炒股票不被割韭菜？/书单推荐/股票基金避坑理财课靠谱吗？', |
||||
|
gtsy: '个体私营协会', |
||||
|
data: '2025-04-17', |
||||
|
type: 'video' |
||||
|
}, |
||||
|
{ |
||||
|
img: '/static/img/sl5.png', |
||||
|
title: '课程标题标题标题', |
||||
|
txt: '小白必看！新手如何炒股票不被割韭菜？/书单推荐/股票基金避坑理财课靠谱吗？', |
||||
|
gtsy: '个体私营协会', |
||||
|
data: '2025-04-17', |
||||
|
type: 'imgtxt' |
||||
|
}, |
||||
|
{ |
||||
|
img: '/static/img/sl5.png', |
||||
|
title: '课程标题标题标题', |
||||
|
txt: '小白必看！新手如何炒股票不被割韭菜？/书单推荐/股票基金避坑理财课靠谱吗？', |
||||
|
gtsy: '个体私营协会', |
||||
|
data: '2025-04-17', |
||||
|
type: 'imgtxt' |
||||
|
} |
||||
|
]) |
||||
|
|
||||
|
const xxClick = (item) => { |
||||
|
console.log(item); |
||||
|
} |
||||
|
|
||||
|
const tabClick = (item) => { |
||||
|
console.log(item); |
||||
|
} |
||||
|
|
||||
|
const search = (val) => { |
||||
|
console.log(val); |
||||
|
zhscrollRel.value.searchleMenuTap(keyword.value) |
||||
|
} |
||||
|
|
||||
|
const clickIcon = () => { |
||||
|
console.log(keyword.value); |
||||
|
zhscrollRel.value.searchleMenuTap(keyword.value) |
||||
|
} |
||||
|
|
||||
|
const kcClick = (item) => { |
||||
|
console.log(item); |
||||
|
uni.navigateTo({ |
||||
|
url: '/pages/learningCenter/detail?id=' + item.type |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
|
||||
onShow(() => { |
onShow(() => { |
||||
electionList.value = [] |
|
||||
getList() |
|
||||
}) |
}) |
||||
</script> |
</script> |
||||
|
|
||||
<style scoped lang="scss"> |
<style scoped lang="scss"> |
||||
.container { |
.container { |
||||
padding: 20rpx; |
padding: 24rpx; |
||||
background-color: #f9fafb; |
background: linear-gradient(0deg, #F1F3F9 72%, rgba(241, 243, 249, 0.2) 88%); |
||||
height: 100vh; |
height: 100vh; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.xxqd { |
||||
|
display: grid; |
||||
|
justify-items: center; |
||||
|
align-items: center; |
||||
|
margin-bottom: 20rpx; |
||||
|
|
||||
|
.head { |
||||
|
width: 272rpx; |
||||
|
height: 60rpx; |
||||
|
background-image: url(@/static/img/xxqd.png); |
||||
|
background-size: 100% 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
font-family: Source Han Sans; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 350; |
||||
|
line-height: 30rpx; |
||||
|
letter-spacing: normal; |
||||
|
color: #FFFFFF; |
||||
|
z-index: 1; |
||||
} |
} |
||||
|
|
||||
|
.main { |
||||
|
width: 100%; |
||||
|
height: 410rpx; |
||||
|
border-radius: 48rpx; |
||||
|
background: #FFFAF7; |
||||
|
box-sizing: border-box; |
||||
|
border: 12rpx solid #DBEDFF; |
||||
|
padding: 60rpx 24rpx 54rpx 24rpx; |
||||
|
margin-top: -40rpx; |
||||
|
display: grid; |
||||
|
justify-items: center; |
||||
|
align-items: flex-start; |
||||
|
|
||||
|
.text { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-family: Source Han Sans; |
||||
|
font-size: 24rpx; |
||||
|
font-weight: 350; |
||||
|
line-height: 28rpx; |
||||
|
letter-spacing: normal; |
||||
|
/* 距离上次学习已经 */ |
||||
|
color: #0C092A; |
||||
|
} |
||||
|
|
||||
|
.hongzi { |
||||
|
margin-left: 6rpx; |
||||
|
font-family: Source Han Sans; |
||||
|
font-size: 24rpx; |
||||
|
font-weight: 350; |
||||
|
line-height: 28rpx; |
||||
|
letter-spacing: normal; |
||||
|
/* 距离上次学习已经 */ |
||||
|
color: #FE0000; |
||||
|
} |
||||
|
|
||||
|
.xxls { |
||||
|
display: flex; |
||||
|
margin-top: 20rpx; |
||||
|
gap: 26rpx; |
||||
|
|
||||
|
.xxone { |
||||
|
display: grid; |
||||
|
align-items: center; |
||||
|
width: 192rpx; |
||||
|
|
||||
|
.xxjd { |
||||
|
margin-top: -34rpx; |
||||
|
width: 100%; |
||||
|
height: 34rpx; |
||||
|
border-radius: 0rpx 0rpx 16rpx 16rpx; |
||||
|
background: #000000; |
||||
|
font-family: Source Han Sans; |
||||
|
font-size: 20rpx; |
||||
|
font-weight: 350; |
||||
|
line-height: 24rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
letter-spacing: normal; |
||||
|
color: #FFFFFF; |
||||
|
display: grid; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.KClist { |
||||
|
display: grid; |
||||
|
|
||||
|
.kcone { |
||||
|
width: 100%; |
||||
|
height: 284rpx; |
||||
|
border-radius: 32rpx; |
||||
|
background: #FFFFFF; |
||||
|
display: flex; |
||||
|
margin-top: 30rpx; |
||||
|
box-sizing: border-box; |
||||
|
|
||||
|
.img { |
||||
|
width: 234rpx; |
||||
|
height: 284rpx; |
||||
|
border-radius: 20rpx 0 0 20rpx; |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.right { |
||||
|
flex: 2; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
padding: 20rpx 28rpx 20rpx 20rpx; |
||||
|
box-sizing: border-box; |
||||
|
display: grid; |
||||
|
align-items: center; |
||||
|
|
||||
|
.title { |
||||
|
font-family: Source Han Sans; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 350; |
||||
|
text-align: justify; |
||||
|
/* 浏览器可能不支持 */ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
letter-spacing: normal; |
||||
|
color: #0C092A; |
||||
|
} |
||||
|
|
||||
|
.txt { |
||||
|
font-family: Source Han Sans; |
||||
|
font-size: 24rpx; |
||||
|
font-weight: 350; |
||||
|
text-align: justify; |
||||
|
/* 浏览器可能不支持 */ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
letter-spacing: normal; |
||||
|
color: #858494; |
||||
|
} |
||||
|
|
||||
|
.bottompart { |
||||
|
margin-top: 42rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
box-sizing: border-box; |
||||
|
|
||||
|
.gtsy { |
||||
|
font-family: Source Han Sans; |
||||
|
font-size: 20rpx; |
||||
|
font-weight: 350; |
||||
|
text-align: justify; |
||||
|
/* 浏览器可能不支持 */ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
letter-spacing: normal; |
||||
|
color: #007FFF; |
||||
|
} |
||||
|
|
||||
|
.data { |
||||
|
font-family: Source Han Sans; |
||||
|
font-size: 20rpx; |
||||
|
font-weight: 350; |
||||
|
text-align: right; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
letter-spacing: normal; |
||||
|
color: #858494; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
<style> |
||||
|
.u-search { |
||||
|
margin: 20rpx 0rpx 0 0 !important; |
||||
|
} |
||||
|
|
||||
|
.u-search__content { |
||||
|
background-color: #FFFFFF !important; |
||||
|
border-radius: 16rpx !important; |
||||
|
height: 90rpx !important; |
||||
|
} |
||||
|
|
||||
|
.u-search__content__input { |
||||
|
background-color: #FFFFFF !important; |
||||
|
} |
||||
</style> |
</style> |
||||
@ -0,0 +1,237 @@ |
|||||
|
<template> |
||||
|
<view class="container"> |
||||
|
<view class="editbox"> |
||||
|
<view class="editone"> |
||||
|
<view class="left"> |
||||
|
<image style="width: 32rpx;height: 32rpx;" src="@/static/img/tx.png" mode=""></image> |
||||
|
<text class="txt">头像</text> |
||||
|
</view> |
||||
|
<view class="right"> |
||||
|
<u-upload :fileList="form.fileList" @afterRead="afterRead" :maxCount="1"> |
||||
|
<image |
||||
|
src='https://lingjing-online.cdn.bcebos.com/v1/lingjing-online/appavatar/2024-01-23/665e6368-eafd-4e0b-a58c-4a848cafa238.png?x-bce-process=image/resize,m_fill,w_360,h_360' |
||||
|
mode="" style="width: 80rpx;height: 80rpx;border-radius: 50%;"></image> |
||||
|
</u-upload> |
||||
|
<!-- <image style="width: 18rpx;height: 18rpx;margin-left: 16rpx;" src="@/static/img/Group13.png" |
||||
|
mode=""></image> --> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="editone"> |
||||
|
<view class="left"> |
||||
|
<image style="width: 32rpx;height: 32rpx;" src="@/static/img/yhm.png" mode=""></image> |
||||
|
<text class="txt">用户名</text> |
||||
|
</view> |
||||
|
<view class="right"> |
||||
|
<u-popup :show="usershow" @close="usershow = false"> |
||||
|
<view class="popupbox"> |
||||
|
<text class="title">请填写用户名</text> |
||||
|
|
||||
|
<u-input type="text" v-model="form.username" /> |
||||
|
<view class="buts"> |
||||
|
<view class="jujue" @click="usershow = false"> |
||||
|
取消 |
||||
|
</view> |
||||
|
<view class="yunxu" @click="sureClick('用户名')"> |
||||
|
确认 |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</u-popup> |
||||
|
<image style="width: 18rpx;height: 18rpx;margin-left: 16rpx;" src="@/static/img/Group13.png" |
||||
|
mode="" @click="usershow = true"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="editone"> |
||||
|
<view class="left"> |
||||
|
<image style="width: 32rpx;height: 32rpx;" src="@/static/img/xb.png" mode=""></image> |
||||
|
<text class="txt">性别</text> |
||||
|
</view> |
||||
|
<view class="right"> |
||||
|
<text class="value">{{form.sex}}</text> |
||||
|
<u-action-sheet :actions="sexlist" title="请选择性别" :show="sexshow" @select="selectClick" @close="sexshow = false" ></u-action-sheet> |
||||
|
<image style="width: 18rpx;height: 18rpx;margin-left: 16rpx;" src="@/static/img/Group13.png" |
||||
|
mode="" @click="sexshow = true"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="editone"> |
||||
|
<view class="left"> |
||||
|
<image style="width: 32rpx;height: 32rpx;" src="@/static/img/sjh.png" mode=""></image> |
||||
|
<text class="txt">绑定手机号</text> |
||||
|
</view> |
||||
|
<view class="right"> |
||||
|
|
||||
|
<image style="width: 18rpx;height: 18rpx;margin-left: 16rpx;" src="@/static/img/Group13.png" |
||||
|
mode=""></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="editone"> |
||||
|
<view class="left"> |
||||
|
<image style="width: 32rpx;height: 32rpx;" src="@/static/img/zsxm.png" mode=""></image> |
||||
|
<text class="txt">真实姓名</text> |
||||
|
</view> |
||||
|
<view class="right"> |
||||
|
|
||||
|
<image style="width: 18rpx;height: 18rpx;margin-left: 16rpx;" src="@/static/img/Group13.png" |
||||
|
mode=""></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="editone"> |
||||
|
<view class="left"> |
||||
|
<image style="width: 32rpx;height: 32rpx;" src="@/static/img/szqy.png" mode=""></image> |
||||
|
<text class="txt">所在企业</text> |
||||
|
</view> |
||||
|
<view class="right"> |
||||
|
|
||||
|
<image style="width: 18rpx;height: 18rpx;margin-left: 16rpx;" src="@/static/img/Group13.png" |
||||
|
mode=""></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { |
||||
|
ref |
||||
|
} from 'vue'; |
||||
|
|
||||
|
const sexshow = ref(false) |
||||
|
const sexlist = ref([ |
||||
|
{ |
||||
|
name: '男', |
||||
|
}, |
||||
|
{ |
||||
|
name: '女', |
||||
|
}, |
||||
|
]); |
||||
|
const selectClick = (val) => { |
||||
|
form.value.sex = val.name |
||||
|
sexshow.value = false |
||||
|
} |
||||
|
|
||||
|
const usershow = ref(false) |
||||
|
|
||||
|
const form = ref({ |
||||
|
fileList: [], |
||||
|
username: '', |
||||
|
sex: '', |
||||
|
num: '', |
||||
|
name: '', |
||||
|
company: '' |
||||
|
}) |
||||
|
|
||||
|
const sureClick = (type) => { |
||||
|
console.log(type); |
||||
|
} |
||||
|
|
||||
|
const afterRead = (e) => { |
||||
|
console.log(e); |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.container { |
||||
|
height: 100vh; |
||||
|
width: 100%; |
||||
|
background: #F1F3F9; |
||||
|
|
||||
|
.editbox { |
||||
|
background: #FFFFFF; |
||||
|
padding: 0 72rpx 0 62rpx; |
||||
|
|
||||
|
.editone { |
||||
|
box-sizing: border-box; |
||||
|
width: 100%; |
||||
|
height: 120rpx; |
||||
|
background: #FFFFFF; |
||||
|
border-bottom: 2rpx solid #EBEBEB; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.left { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
.txt { |
||||
|
margin-left: 16rpx; |
||||
|
font-family: Source Han Sans; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 300; |
||||
|
text-align: right; |
||||
|
letter-spacing: normal; |
||||
|
color: #273847; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.right { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
.value { |
||||
|
font-family: Source Han Sans; |
||||
|
font-size: 14px; |
||||
|
font-weight: 300; |
||||
|
text-align: right; |
||||
|
letter-spacing: normal; |
||||
|
color: #273847; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.popupbox { |
||||
|
display: grid; |
||||
|
align-items: center; |
||||
|
justify-items: center; |
||||
|
.title { |
||||
|
font-family: Source Han Sans; |
||||
|
font-size: 14px; |
||||
|
font-weight: 300; |
||||
|
line-height: 17px; |
||||
|
text-align: right; |
||||
|
letter-spacing: normal; |
||||
|
color: #273847; |
||||
|
} |
||||
|
.buts { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
.yunxu { |
||||
|
margin-left: 20px; |
||||
|
width: 180rpx; |
||||
|
height: 70rpx; |
||||
|
border-radius: 10rpx; |
||||
|
background: #07C160; |
||||
|
font-family: Source Han Sans; |
||||
|
font-size: 28rpx; |
||||
|
text-align: justify; |
||||
|
/* 浏览器可能不支持 */ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
letter-spacing: normal; |
||||
|
color: #FFFFFF; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.jujue { |
||||
|
width: 180rpx; |
||||
|
height: 70rpx; |
||||
|
border-radius: 10rpx; |
||||
|
background: #dadada; |
||||
|
font-family: Source Han Sans; |
||||
|
font-size: 28rpx; |
||||
|
text-align: justify; |
||||
|
/* 浏览器可能不支持 */ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
letter-spacing: normal; |
||||
|
color: #393939; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
After Width: | Height: | Size: 266 B |
|
After Width: | Height: | Size: 574 B |
|
After Width: | Height: | Size: 7.1 KiB |
|
After Width: | Height: | Size: 486 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 249 B |
|
After Width: | Height: | Size: 649 B |
|
After Width: | Height: | Size: 70 KiB |
|
After Width: | Height: | Size: 124 KiB |
|
After Width: | Height: | Size: 747 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 6.6 KiB |
|
After Width: | Height: | Size: 7.0 KiB |
|
After Width: | Height: | Size: 966 B |
|
After Width: | Height: | Size: 983 B |
|
After Width: | Height: | Size: 791 B |
|
After Width: | Height: | Size: 818 B |
Loading…
Reference in new issue