xingyy/uni-ticket-system
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

submit

Browse Source
This commit is contained in:
xingyy 2023-12-11 19:57:05 +08:00
parent b990b94490
commit a76d89c31b
13 changed files with 953 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.vue
View File

@ -17,6 +17,7 @@ onLaunch(()=>{
})
</script>
<style>
@import url('@/components/transition-min/transition.min.css');
/* #ifdef APP-PLUS-NVUE */
@import './tmui/scss/nvue.css';
/* #endif */

1
src/components/transition-min/transition.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

131
src/components/uni-transition/createAnimation.js Normal file
View File

@ -0,0 +1,131 @@
// const defaultOption = {
// duration: 300,
// timingFunction: 'linear',
// delay: 0,
// transformOrigin: '50% 50% 0'
// }
// #ifdef APP-NVUE
const nvueAnimation = uni.requireNativePlugin('animation')
// #endif
class MPAnimation {
constructor(options, _this) {
this.options = options
// 在iOS10+QQ小程序平台下，传给原生的对象一定是个普通对象而不是Proxy对象，否则会报parameter should be Object instead of ProxyObject的错误
this.animation = uni.createAnimation({
...options
})
this.currentStepAnimates = {}
this.next = 0
this.$ = _this
}
_nvuePushAnimates(type, args) {
let aniObj = this.currentStepAnimates[this.next]
let styles = {}
if (!aniObj) {
styles = {
styles: {},
config: {}
}
} else {
styles = aniObj
}
if (animateTypes1.includes(type)) {
if (!styles.styles.transform) {
styles.styles.transform = ''
}
let unit = ''
if(type === 'rotate'){
unit = 'deg'
}
styles.styles.transform += `${type}(${args+unit}) `
} else {
styles.styles[type] = `${args}`
}
this.currentStepAnimates[this.next] = styles
}
_animateRun(styles = {}, config = {}) {
let ref = this.$.$refs['ani'].ref
if (!ref) return
return new Promise((resolve, reject) => {
nvueAnimation.transition(ref, {
styles,
...config
}, res => {
resolve()
})
})
}
_nvueNextAnimate(animates, step = 0, fn) {
let obj = animates[step]
if (obj) {
let {
styles,
config
} = obj
this._animateRun(styles, config).then(() => {
step += 1
this._nvueNextAnimate(animates, step, fn)
})
} else {
this.currentStepAnimates = {}
typeof fn === 'function' && fn()
this.isEnd = true
}
}
step(config = {}) {
// #ifndef APP-NVUE
this.animation.step(config)
// #endif
// #ifdef APP-NVUE
this.currentStepAnimates[this.next].config = Object.assign({}, this.options, config)
this.currentStepAnimates[this.next].styles.transformOrigin = this.currentStepAnimates[this.next].config.transformOrigin
this.next++
// #endif
return this
}
run(fn) {
// #ifndef APP-NVUE
this.$.animationData = this.animation.export()
this.$.timer = setTimeout(() => {
typeof fn === 'function' && fn()
}, this.$.durationTime)
// #endif
// #ifdef APP-NVUE
this.isEnd = false
let ref = this.$.$refs['ani'] && this.$.$refs['ani'].ref
if(!ref) return
this._nvueNextAnimate(this.currentStepAnimates, 0, fn)
this.next = 0
// #endif
}
}
const animateTypes1 = ['matrix', 'matrix3d', 'rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scale3d',
'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'translate', 'translate3d', 'translateX', 'translateY',
'translateZ'
]
const animateTypes2 = ['opacity', 'backgroundColor']
const animateTypes3 = ['width', 'height', 'left', 'right', 'top', 'bottom']
animateTypes1.concat(animateTypes2, animateTypes3).forEach(type => {
MPAnimation.prototype[type] = function(...args) {
// #ifndef APP-NVUE
this.animation[type](...args)
// #endif
// #ifdef APP-NVUE
this._nvuePushAnimates(type, args)
// #endif
return this
}
})
export function createAnimation(option, _this) {
if(!_this) return
clearTimeout(_this.timer)
return new MPAnimation(option, _this)
}

286
src/components/uni-transition/uni-transition.vue Normal file
View File

@ -0,0 +1,286 @@
<template>
<!-- #ifndef APP-NVUE -->
<view v-show="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<view v-if="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view>
<!-- #endif -->
</template>
<script>
import { createAnimation } from './createAnimation'
/**
* Transition 过渡动画
* @description 简单过渡动画组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=985
* @property {Boolean} show = [false|true] 控制组件显示或隐藏
* @property {Array|String} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
* @value fade 渐隐渐出过渡
* @value slide-top 由上至下过渡
* @value slide-right 由右至左过渡
* @value slide-bottom 由下至上过渡
* @value slide-left 由左至右过渡
* @value zoom-in 由小到大过渡
* @value zoom-out 由大到小过渡
* @property {Number} duration 过渡动画持续时间
* @property {Object} styles 组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red`
*/
export default {
name: 'uniTransition',
emits:['click','change'],
props: {
show: {
type: Boolean,
default: false
},
modeClass: {
type: [Array, String],
default() {
return 'fade'
}
},
duration: {
type: Number,
default: 300
},
styles: {
type: Object,
default() {
return {}
}
},
customClass:{
type: String,
default: ''
},
onceRender:{
type:Boolean,
default:false
},
},
data() {
return {
isShow: false,
transform: '',
opacity: 1,
animationData: {},
durationTime: 300,
config: {}
}
},
watch: {
show: {
handler(newVal) {
if (newVal) {
this.open()
} else {
// 避免上来就执行 close,导致动画错乱
if (this.isShow) {
this.close()
}
}
},
immediate: true
}
},
computed: {
// 生成样式数据
stylesObject() {
let styles = {
...this.styles,
'transition-duration': this.duration / 1000 + 's'
}
let transform = ''
for (let i in styles) {
let line = this.toLine(i)
transform += line + ':' + styles[i] + ';'
}
return transform
},
// 初始化动画条件
transformStyles() {
return 'transform:' + this.transform + ';' + 'opacity:' + this.opacity + ';' + this.stylesObject
}
},
created() {
// 动画默认配置
this.config = {
duration: this.duration,
timingFunction: 'ease',
transformOrigin: '50% 50%',
delay: 0
}
this.durationTime = this.duration
},
methods: {
/**
* ref 触发 初始化动画
*/
init(obj = {}) {
if (obj.duration) {
this.durationTime = obj.duration
}
this.animation = createAnimation(Object.assign(this.config, obj),this)
},
/**
* 点击组件触发回调
*/
onClick() {
this.$emit('click', {
detail: this.isShow
})
},
/**
* ref 触发 动画分组
* @param {Object} obj
*/
step(obj, config = {}) {
if (!this.animation) return
for (let i in obj) {
try {
if(typeof obj[i] === 'object'){
this.animation[i](...obj[i])
}else{
this.animation[i](obj[i])
}
} catch (e) {
console.error(`方法 ${i} 不存在`)
}
}
this.animation.step(config)
return this
},
/**
* ref 触发 执行动画
*/
run(fn) {
if (!this.animation) return
this.animation.run(fn)
},
// 开始过度动画
open() {
clearTimeout(this.timer)
this.transform = ''
this.isShow = true
let { opacity, transform } = this.styleInit(false)
if (typeof opacity !== 'undefined') {
this.opacity = opacity
}
this.transform = transform
// 确保动态样式已经生效后，执行动画，如果不加 nextTick ，会导致 wx 动画执行异常
this.$nextTick(() => {
// TODO 定时器保证动画完全执行，目前有些问题，后面会取消定时器
this.timer = setTimeout(() => {
this.animation = createAnimation(this.config, this)
this.tranfromInit(false).step()
this.animation.run()
this.$emit('change', {
detail: this.isShow
})
}, 20)
})
},
// 关闭过度动画
close(type) {
if (!this.animation) return
this.tranfromInit(true)
.step()
.run(() => {
this.isShow = false
this.animationData = null
this.animation = null
let { opacity, transform } = this.styleInit(false)
this.opacity = opacity || 1
this.transform = transform
this.$emit('change', {
detail: this.isShow
})
})
},
// 处理动画开始前的默认样式
styleInit(type) {
let styles = {
transform: ''
}
let buildStyle = (type, mode) => {
if (mode === 'fade') {
styles.opacity = this.animationType(type)[mode]
} else {
styles.transform += this.animationType(type)[mode] + ' '
}
}
if (typeof this.modeClass === 'string') {
buildStyle(type, this.modeClass)
} else {
this.modeClass.forEach(mode => {
buildStyle(type, mode)
})
}
return styles
},
// 处理内置组合动画
tranfromInit(type) {
let buildTranfrom = (type, mode) => {
let aniNum = null
if (mode === 'fade') {
aniNum = type ? 0 : 1
} else {
aniNum = type ? '-100%' : '0'
if (mode === 'zoom-in') {
aniNum = type ? 0.8 : 1
}
if (mode === 'zoom-out') {
aniNum = type ? 1.2 : 1
}
if (mode === 'slide-right') {
aniNum = type ? '100%' : '0'
}
if (mode === 'slide-bottom') {
aniNum = type ? '100%' : '0'
}
}
this.animation[this.animationMode()[mode]](aniNum)
}
if (typeof this.modeClass === 'string') {
buildTranfrom(type, this.modeClass)
} else {
this.modeClass.forEach(mode => {
buildTranfrom(type, mode)
})
}
return this.animation
},
animationType(type) {
return {
fade: type ? 1 : 0,
'slide-top': `translateY(${type ? '0' : '-100%'})`,
'slide-right': `translateX(${type ? '0' : '100%'})`,
'slide-bottom': `translateY(${type ? '0' : '100%'})`,
'slide-left': `translateX(${type ? '0' : '-100%'})`,
'zoom-in': `scaleX(${type ? 1 : 0.8}) scaleY(${type ? 1 : 0.8})`,
'zoom-out': `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})`
}
},
// 内置动画类型与实际动画对应字典
animationMode() {
return {
fade: 'opacity',
'slide-top': 'translateY',
'slide-right': 'translateX',
'slide-bottom': 'translateY',
'slide-left': 'translateX',
'zoom-in': 'scale',
'zoom-out': 'scale'
}
},
// 驼峰转中横线
toLine(name) {
return name.replace(/([A-Z])/g, '-$1').toLowerCase()
}
}
}
</script>
<style></style>

4
src/http/init.js
View File

@ -1,8 +1,8 @@
import {uniRequest} from "@/http/main";
export default uniRequest.created({
//baseUrl: 'http://172.16.100.93:9052',
baseUrl: 'http://192.168.88.122:9021',
baseUrl: 'http://172.16.100.93:9052',
// baseUrl: 'http://192.168.88.122:9021',
header: {
Authorization: uni.getStorageSync('token') ?? ''
},

2
src/main.ts
View File

@ -4,10 +4,12 @@ import tmui from "./tmui";
import App from "./App.vue";
import customTitle from "./components/custom-title/index.vue";
import uniTransition from "@/components/uni-transition/uni-transition.vue";
export function createApp() {
const app = createSSRApp(App);
app.component("customTitle", customTitle);
app.component("uniTransition", uniTransition);
app.use(tmui, { shareDisable: false } as Tmui.tmuiConfig);
return {
app,

11
src/pages.json
View File

@ -39,6 +39,17 @@
}
}
},
{
"path": "pages/test/index",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"app-plus": {
"titleNView": false // 禁用原生导航
}
}
},
{
"path": "pages/login/index",
"style": {

4
src/pages/home/index.vue
View File

@ -1,6 +1,5 @@
<template>
<custom-title class="title-block" title="首都博物馆东馆" :isBack="false">
</custom-title>
<div class="main">
<div class="content1">
<div class="wrap1">门票名称</div>
@ -56,7 +55,6 @@ const handleTips = () => {
.main {
height: 80vh;
width: 100%;
background-image: url('https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/16968647-fc99-46fe-b95c-620c55b7646f.png');
background-size: 100%;
padding: 0 32rpx 38rpx 32rpx;
display: flex;

20
src/pages/index/index.vue
View File

@ -1,7 +1,13 @@
<template>
<div>
<home v-if="acc===0"/>
<mine v-if="acc===1"/>
<div class="tab-index">
<custom-title class="title-block" :title="accTitleList.find(x=>x.value===acc).title" :isBack="false">
</custom-title>
<uni-transition :show="acc===0" ref="ani" custom-class="transition" :mode-class="['fade', 'slide-left']">
<home/>
</uni-transition>
<uni-transition :show="acc===1" ref="ani" custom-class="transition" :mode-class="['fade', 'slide-right']">
<mine />
</uni-transition>
<self-tabbar v-model="acc"></self-tabbar>
</div>
</template>
@ -16,6 +22,12 @@ onLoad((option)=>{
acc.value=Number(option.acc)
}
})
const accTitleList=[{title:'首都博物馆东馆',value:0},{title:'智慧门票',value:1}]
const acc=ref(0)
</script>
<style lang="scss" scoped>
.tab-index{
background-image: url('https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/16968647-fc99-46fe-b95c-620c55b7646f.png');
background-size: 100%;
}
</style>

1
src/pages/login/index.vue
View File

@ -17,6 +17,7 @@ code:data.detail.code
})
if (res.code===200){
uni.setStorageSync('token',res.data.token);
console.log(uni.getStorageSync('token'),'11111')
getUserInfo()
}
}

378
src/pages/mine/index.vue
View File

@ -1,159 +1,179 @@
<template>
<custom-title class="title-block" title="智慧门票" :isBack="false">
</custom-title>
<div class="large-container">
<div class="content1">
<div class="wrap1">
<div class="wrap1_1">
<image src="../../static/06.png" alt=""/>
</div>
<div class="wrap1_2">
<div class="wrap1_2_1">
<div class="wrap1_2_1_1">某某某</div>
<div class="wrap1_2_1_2">已实名</div>
<div class="large-container">
<div class="content1">
<div class="wrap1">
<div class="wrap1_1">
<image src="../../static/06.png" alt=""/>
</div>
<div class="wrap1_2_2">178273938123</div>
<div class="wrap1_2">
<div class="wrap1_2_1">
<div class="wrap1_2_1_1">{{ userInfo.nickName }}</div>
<!-- <div class="wrap1_2_1_2">已实名</div>-->
</div>
<div class="wrap1_2_2">{{ userInfo.telNum }}</div>
</div>
</div>
<div class="wrap2" @click="goSetUp">
<div class="wrap2_1">
<image src="../../static/zu609@3x.png" alt=""/>
</div>
<div class="wrap2_2">设置</div>
</div>
</div>
<div class="wrap2" @click="goSetUp">
<div class="wrap2_1">
<image src="../../static/zu609@3x.png" alt=""/>
<div class="content2">
<div class="wrap1">
<div class="wrap1_1">2</div>
<div class="wrap1_2">未使用门票</div>
</div>
<div class="wrap2"></div>
<div class="wrap3 active">
<div class="wrap1_1">3</div>
<div class="wrap1_2">历史门票</div>
</div>
<div class="wrap2_2">设置</div>
</div>
</div>
<div class="content2">
<div class="wrap1">
<div class="wrap1_1">2</div>
<div class="wrap1_2">未使用门票</div>
</div>
<div class="wrap2"></div>
<div class="wrap3 active">
<div class="wrap1_1">3</div>
<div class="wrap1_2">历史门票</div>
</div>
</div>
<div class="content3"></div>
<div class="content4">·历史预约门票</div>
<div class="content5">
<div class="wrap1">
<div class="content3"></div>
<div class="content4">·历史预约门票</div>
<div class="content5">
<div class="wrap1">
<div class="wrap1_1 verified">已核销</div>
<div class="wrap1_2">
<div class="wrap1_2_1">首都博物馆门票</div>
<div class="wrap1_2_2">预约场馆:首都博物馆</div>
<div class="wrap1_2_2">预约日期:2023.12.30</div>
<div class="wrap1_2_2">预约类型:1</div>
</div>
<div class="wrap1_3" @click="goViewVenues">
<image src="../../static/zu762@3x.png" alt=""/>
</div>
</div>
<div class="wrap1">
<div class="wrap1_1 verified">已核销</div>
<div class="wrap1_2">
<div class="wrap1_2_1">首都博物馆门票</div>
<div class="wrap1_2_2">预约场馆:首都博物馆</div>
<div class="wrap1_2_2">预约日期:2023.12.30</div>
<div class="wrap1_2_2">预约类型:1</div>
</div>
<div class="wrap1_3" @click="goViewVenues">
<image src="../../static/zu762@3x.png" alt=""/>
</div>
</div>
<div class="wrap1">
<div class="wrap1_1 verified">已核销</div>
<div class="wrap1_2">
<div class="wrap1_2_1">首都博物馆门票</div>
<div class="wrap1_2_2">预约场馆:首都博物馆</div>
<div class="wrap1_2_2">预约日期:2023.12.30</div>
<div class="wrap1_2_2">预约类型:1</div>
</div>
<div class="wrap1_3" @click="goViewVenues">
<image src="../../static/zu762@3x.png" alt=""/>
<div class="wrap1_2">
<div class="wrap1_2_1">首都博物馆门票</div>
<div class="wrap1_2_2">预约场馆:首都博物馆</div>
<div class="wrap1_2_2">预约日期:2023.12.30</div>
<div class="wrap1_2_2">预约类型:1</div>
</div>
<div class="wrap1_3" @click="goViewVenues">
<image src="../../static/zu762@3x.png" alt=""/>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
const goViewVenues=()=>{
import {ref} from 'vue'
import {onShow} from "@dcloudio/uni-app";
const modeClass = ref('')
const show = ref(true)
const userInfo = ref(uni.getStorageSync('userInfo') ?? {})
onShow(() => {
show.value = true
})
const goViewVenues = () => {
uni.navigateTo({
url: '/pages/view-venues/index'
})
}
const goSetUp=()=>{
const goSetUp = () => {
uni.navigateTo({
url: '/pages/setup/index'
})
}
</script>
<style scoped lang="scss">
.large-container{
.large-container {
overflow: hidden;
background-image: url('https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/16968647-fc99-46fe-b95c-620c55b7646f.png');
background-size: 100%;
height: 100vh;
height: 80vh;
padding: 0rpx 32rpx 0 32rpx;
.content5{
.content5 {
margin-top: 14rpx;
.wrap1{
position: relative;
width: 686rpx;
height: 210rpx;
background-image: url("https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/156dd8fa-e56d-4208-bc15-58eb273c146f.png");
background-size: 100%;
.wrap1_3{
bottom: 18rpx;
right: 16rpx;
position: absolute;
width: 150rpx;
height: 56rpx;
background-color: #72665F;
border-radius: 40rpx;
display: flex;
justify-content: center;
align-items: center;
image{
width: 119.5rpx;
height:34rpx;
}
}
.wrap1_2{
top: 16rpx;
right: 182rpx;
position: absolute;
.wrap1_2_1{
font-size: 32rpx;
color: #fff;
margin-bottom: 6rpx;
}
.wrap1_2_2{
margin-bottom: 2rpx;
font-size: 20rpx;
color: #fff;
.wrap1 {
position: relative;
width: 686rpx;
height: 210rpx;
background-image: url("https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/156dd8fa-e56d-4208-bc15-58eb273c146f.png");
background-size: 100%;
.wrap1_3 {
bottom: 18rpx;
right: 16rpx;
position: absolute;
width: 150rpx;
height: 56rpx;
background-color: #72665F;
border-radius: 40rpx;
display: flex;
justify-content: center;
align-items: center;
image {
width: 119.5rpx;
height: 34rpx;
}
}
.wrap1_2 {
top: 16rpx;
right: 182rpx;
position: absolute;
.wrap1_2_1 {
font-size: 32rpx;
color: #fff;
margin-bottom: 6rpx;
}
.wrap1_2_2 {
margin-bottom: 2rpx;
font-size: 20rpx;
color: #fff;
}
}
.wrap1_1 {
top: 26rpx;
left: 26rpx;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 112rpx;
height: 40rpx;
border-radius: 22rpx;
font-size: 20rpx;
&.verified {
background-color: #fff;
color: #72665F;
}
}
}
}
.wrap1_1{
top: 26rpx;
left: 26rpx;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 112rpx;
height: 40rpx;
border-radius: 22rpx;
font-size: 20rpx;
&.verified{
background-color: #fff;
color: #72665F;
}
}
}
}
.content4{
.content4 {
margin-top: 22rpx;
font-size: 28rpx;
color:#72665F;
color: #72665F;
}
.content3{
.content3 {
margin-top: 38rpx;
height: 1rpx;
width: 100%;
background-image: url("../../static/zx303@3x (1).png");
background-size: 100%;
}
.content2{
.content2 {
margin-top: 34rpx;
width: 686rpx;
height: 134rpx;
@ -161,42 +181,49 @@ background-image: url('https://cdns.fontree.cn/fonchain-main/prod/image/1833/ava
background-color: #fff;
border-radius: 40rpx;
align-items: center;
.wrap1{
border-radius: 30rpx;
margin-left: 28rpx;
width: 290rpx;
height: 104rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
&.active{
background-color: #F7963B;
.wrap1_1{
color: #fff;
}
.wrap1_2{
color: #fff;
}
.wrap1 {
border-radius: 30rpx;
margin-left: 28rpx;
width: 290rpx;
height: 104rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
&.active {
background-color: #F7963B;
.wrap1_1 {
color: #fff;
}
.wrap1_1{
font-size: 28rpx;
color: #F7963B;
}
.wrap1_2{
font-size: 20rpx;
color: #000;
.wrap1_2 {
color: #fff;
}
}
.wrap2{
.wrap1_1 {
font-size: 28rpx;
color: #F7963B;
}
.wrap1_2 {
font-size: 20rpx;
color: #000;
}
}
.wrap2 {
margin-left: 28rpx;
margin-right: 28rpx;
width: 2rpx;
width: 2rpx;
height: 70rpx;
background-color: #D8CDC6;
}
.wrap3{
.wrap3 {
border-radius: 30rpx;
width: 290rpx;
height: 104rpx;
@ -204,28 +231,36 @@ background-image: url('https://cdns.fontree.cn/fonchain-main/prod/image/1833/ava
flex-direction: column;
align-items: center;
justify-content: center;
&.active{
&.active {
background-color: #F7963B;
.wrap1_1{
.wrap1_1 {
color: #fff;
}
.wrap1_2{
.wrap1_2 {
color: #fff;
}
}
.wrap1_1{
.wrap1_1 {
font-size: 28rpx;
color: #979797;
}
.wrap1_2{
.wrap1_2 {
font-size: 20rpx;
color: #000;
}
}
}
.content1{
.content1 {
margin-top: 38rpx;
display: flex;
.wrap2{
.wrap2 {
margin-left: 24rpx;
width: 182rpx;
height: 150rpx;
@ -233,58 +268,69 @@ background-image: url('https://cdns.fontree.cn/fonchain-main/prod/image/1833/ava
background-color: #E5580F;
display: flex;
align-items: center;
.wrap2_2{
.wrap2_2 {
color: #fff;
font-size: 20rpx;
}
.wrap2_1{
.wrap2_1 {
margin-left: 40rpx;
margin-right: 20rpx;
image{
width: 40.88rpx;
height: 40.88rpx;
}
image {
width: 40.88rpx;
height: 40.88rpx;
}
}
}
.wrap1{
.wrap1 {
border-radius: 40rpx;
width: 480rpx;
height: 150rpx;
background-color: #fff;
display: flex;
align-items: center;
.wrap1_2{
.wrap1_2 {
display: flex;
flex-direction: column;
.wrap1_2_2{
.wrap1_2_2 {
margin-top: 6rpx;
color: #626262;
}
.wrap1_2_1{
.wrap1_2_1 {
display: flex;
align-items: center;
.wrap1_2_1_1{
.wrap1_2_1_1 {
color: #000;
font-size: 28rpx;
}
.wrap1_2_1_2{
.wrap1_2_1_2 {
margin-left: 6rpx;
display: flex;
justify-content: center;
align-items: center;
width: 76rpx;
height: 26rpx;
background-color:#FFCD5C;
background-color: #FFCD5C;
border-radius: 8rpx;
font-size: 16rpx;
color: #fff;
}
}
}
.wrap1_1{
.wrap1_1 {
margin-left: 68rpx;
margin-right: 36rpx;
image{
image {
width: 100rpx;
height: 100rpx;
}

6
src/pages/setup/index.vue
View File

@ -6,7 +6,7 @@
</div>
<div class="wrap2">
<div class="wrap2_1">恢复默认头像</div>
<div class="wrap2_2">更换头像</div>
<div class="wrap2_2" @click="changeAvatar">更换头像</div>
</div>
</div>
<div class="content2">
@ -38,7 +38,11 @@
</div>
</template>
<script setup>
const changeAvatar=()=>{
uni.uploadFile({
})
}
</script>
<style scoped lang="scss">
.large-container{

284
src/pages/test/index.vue Normal file
View File

@ -0,0 +1,284 @@
<template>
<view>
<view class="itemlist list-animation">
<view class="item">
<view class="ld infinite ld-blur-in"></view>
<view>blur-in</view>
</view>
<view class="item">
<view class="ld infinite ld-blur-out"></view>
<view>blur-out</view>
</view>
<view class="item">
<view class="ld infinite ld-bounce-alt-in"></view>
<view>bounce-alt-in</view>
</view>
<view class="item">
<view class="ld infinite ld-bounce-alt-out"></view>
<view>bounce-alt-out</view>
</view>
<view class="item">
<view class="ld infinite ld-bounce-in"></view>
<view>bounce-in</view>
</view>
<view class="item">
<view class="ld infinite ld-bounce-out"></view>
<view>bounce-out</view>
</view>
<view class="item">
<view class="ld infinite ld-fade-in"></view>
<view>fade-in</view>
</view>
<view class="item">
<view class="ld infinite ld-fade-out"></view>
<view>fade-out</view>
</view>
<view class="item">
<view class="ld infinite ld-fall-btt-in"></view>
<view>fall-btt-in</view>
</view>
<view class="item">
<view class="ld infinite ld-fall-ltr-in"></view>
<view>fall-ltr-in</view>
</view>
<view class="item">
<view class="ld infinite ld-fall-rtl-in"></view>
<view>fall-rtl-in</view>
</view>
<view class="item">
<view class="ld infinite ld-fall-ttb-in"></view>
<view>fall-ttb-in</view>
</view>
<view class="item">
<view class="ld infinite ld-flip-h-in"></view>
<view>flip-h-in</view>
</view>
<view class="item">
<view class="ld infinite ld-flip-h-out"></view>
<view>flip-h-out</view>
</view>
<view class="item">
<view class="ld infinite ld-flip-v-in"></view>
<view>flip-v-in</view>
</view>
<view class="item">
<view class="ld infinite ld-flip-v-out"></view>
<view>flip-v-out</view>
</view>
<view class="item">
<view class="ld infinite ld-float-btt-in"></view>
<view>float-btt-in</view>
</view>
<view class="item">
<view class="ld infinite ld-float-btt-out"></view>
<view>float-btt-out</view>
</view>
<view class="item">
<view class="ld infinite ld-float-ltr-in"></view>
<view>float-ltr-in</view>
</view>
<view class="item">
<view class="ld infinite ld-float-ltr-out"></view>
<view>float-ltr-out</view>
</view>
<view class="item">
<view class="ld infinite ld-float-rtl-in"></view>
<view>float-rtl-in</view>
</view>
<view class="item">
<view class="ld infinite ld-float-rtl-out"></view>
<view>float-rtl-out</view>
</view>
<view class="item">
<view class="ld infinite ld-float-ttb-in"></view>
<view>float-ttb-in</view>
</view>
<view class="item">
<view class="ld infinite ld-float-ttb-out"></view>
<view>float-ttb-out</view>
</view>
<view class="item">
<view class="ld infinite ld-grow-btt-in"></view>
<view>grow-btt-in</view>
</view>
<view class="item">
<view class="ld infinite ld-grow-btt-out"></view>
<view>grow-btt-out</view>
</view>
<view class="item">
<view class="ld infinite ld-grow-ltr-in"></view>
<view>grow-ltr-in</view>
</view>
<view class="item">
<view class="ld infinite ld-grow-ltr-out"></view>
<view>grow-ltr-out</view>
</view>
<view class="item">
<view class="ld infinite ld-grow-rtl-in"></view>
<view>grow-rtl-in</view>
</view>
<view class="item">
<view class="ld infinite ld-grow-rtl-out"></view>
<view>grow-rtl-out</view>
</view>
<view class="item">
<view class="ld infinite ld-grow-ttb-in"></view>
<view>grow-ttb-in</view>
</view>
<view class="item">
<view class="ld infinite ld-grow-ttb-out"></view>
<view>grow-ttb-out</view>
</view>
<view class="item">
<view class="ld infinite ld-jump-alt-in"></view>
<view>jump-alt-in</view>
</view>
<view class="item">
<view class="ld infinite ld-jump-alt-out"></view>
<view>jump-alt-out</view>
</view>
<view class="item">
<view class="ld infinite ld-jump-in"></view>
<view>jump-in</view>
</view>
<view class="item">
<view class="ld infinite ld-jump-out"></view>
<view>jump-out</view>
</view>
<view class="item">
<view class="ld infinite ld-power-off"></view>
<view>power-off</view>
</view>
<view class="item">
<view class="ld infinite ld-power-on"></view>
<view>power-on</view>
</view>
<view class="item">
<view class="ld infinite ld-rush-btt-in"></view>
<view>rush-btt-in</view>
</view>
<view class="item">
<view class="ld infinite ld-rush-ltr-in"></view>
<view>rush-ltr-in</view>
</view>
<view class="item">
<view class="ld infinite ld-rush-rtl-in"></view>
<view>rush-rtl-in</view>
</view>
<view class="item">
<view class="ld infinite ld-rush-ttb-in"></view>
<view>rush-ttb-in</view>
</view>
<view class="item">
<view class="ld infinite ld-slide-btt-in"></view>
<view>slide-btt-in</view>
</view>
<view class="item">
<view class="ld infinite ld-slide-btt-out"></view>
<view>slide-btt-out</view>
</view>
<view class="item">
<view class="ld infinite ld-slide-ltr-in"></view>
<view>slide-ltr-in</view>
</view>
<view class="item">
<view class="ld infinite ld-slide-ltr-out"></view>
<view>slide-ltr-out</view>
</view>
<view class="item">
<view class="ld infinite ld-slide-rtl-in"></view>
<view>slide-rtl-in</view>
</view>
<view class="item">
<view class="ld infinite ld-slide-rtl-out"></view>
<view>slide-rtl-out</view>
</view>
<view class="item">
<view class="ld infinite ld-slide-ttb-in"></view>
<view>slide-ttb-in</view>
</view>
<view class="item">
<view class="ld infinite ld-slide-ttb-out"></view>
<view>slide-ttb-out</view>
</view>
<view class="item">
<view class="ld infinite ld-spring-btt-in"></view>
<view>spring-btt-in</view>
</view>
<view class="item">
<view class="ld infinite ld-spring-ltr-in"></view>
<view>spring-ltr-in</view>
</view>
<view class="item">
<view class="ld infinite ld-spring-rtl-in"></view>
<view>spring-rtl-in</view>
</view>
<view class="item">
<view class="ld infinite ld-spring-ttb-in"></view>
<view>spring-ttb-in</view>
</view>
<view class="item">
<view class="ld infinite ld-throw-btt-in"></view>
<view>throw-btt-in</view>
</view>
<view class="item">
<view class="ld infinite ld-throw-ltr-in"></view>
<view>throw-ltr-in</view>
</view>
<view class="item">
<view class="ld infinite ld-throw-rtl-in"></view>
<view>throw-rtl-in</view>
</view>
<view class="item">
<view class="ld infinite ld-throw-ttb-in"></view>
<view>throw-ttb-in</view>
</view>
<view class="item">
<view class="ld infinite ld-vortex-alt-in"></view>
<view>vortex-alt-in</view>
</view>
<view class="item">
<view class="ld infinite ld-vortex-alt-out"></view>
<view>vortex-alt-out</view>
</view>
<view class="item">
<view class="ld infinite ld-vortex-in"></view>
<view>vortex-in</view>
</view>
<view class="item">
<view class="ld infinite ld-vortex-out"></view>
<view>vortex-out</view>
</view>
<view class="item">
<view class="ld infinite ld-zoom-in"></view>
<view>zoom-in</view>
</view>
<view class="item">
<view class="ld infinite ld-zoom-out"></view>
<view>zoom-out</view>
</view>
</view>
</view>
</template>
<script setup>
</script>
<style>
@import url('../../components/transition-min/transition.min.css');
.item {
width: 250rpx;
height: 250rpx;
display: inline-block;
text-align: center;
font-size: 28rpx;
}
.list-animation .item view:first-child {
margin: 32px auto;
width: 32px;
height: 32px;
border-radius: 3px;
background: linear-gradient(45deg, #444 0%, #444 15%, transparent 15%, transparent 18%, #444 10%);
}
</style>