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

submit

Browse Source
master
xingyy 10 months ago
parent b990b94490
commit a76d89c31b
13 changed files with 953 additions and 176 deletions
Show Stats Download Patch File Download Diff File

1
src/App.vue
Unescape Escape 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
View File

File diff suppressed because one or more lines are too long

131
src/components/uni-transition/createAnimation.js
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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 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">{{ userInfo.nickName }}</div>
<!-- <div class="wrap1_2_1_2">已实名</div>-->
</div>
<div class="wrap1_2_2">{{ userInfo.telNum }}</div>
</div>
</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="wrap2" @click="goSetUp">
<div class="wrap2_1">
<image src="../../static/zu609@3x.png" alt=""/>
</div>
<div class="wrap1_2_2">178273938123</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_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="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="wrap2"></div>
<div class="wrap3 active">
<div class="wrap1_1">3</div>
<div class="wrap1_2">历史门票</div>
</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="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>
</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_1{
font-size: 28rpx;
color: #F7963B;
.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{
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
Unescape Escape 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
Unescape Escape 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>
Write Preview
Loading…
Cancel
Save