榆钱落尽槿花稀
448712ece5
本次提交主要包含以下内容： 1. 新增积分申请系统核心功能： - 添加登录页面及API接口 - 实现积分申请记录查看功能 - 集成微信小程序分享功能 - 添加请求管理工具类 2. 引入Tuniao UI组件库： - 添加时间线、折叠面板、表格等UI组件 - 集成头像组、单选框组等交互组件 - 配置全局样式和主题颜色 3. 基础架构搭建： - 配置项目manifest和pages.json路由 - 添加状态管理store - 实现自定义导航栏适配 - 添加工具函数(加解密、数字处理等) 4. 静态资源： - 添加项目logo和背景图片 - 配置uni.scss全局样式变量 本次提交为系统基础功能搭建，后续将进一步完善积分申请流程和审批功能。
148 lines
3.4 KiB
Vue
148 lines
3.4 KiB
Vue
<template>
|
|
<view class="multiple-options">
|
|
<view class="list">
|
|
<block v-for="(item, index) in listData" :key="index">
|
|
<view
|
|
class="list__item"
|
|
:class="[`tn-main-gradient-${tuniaoColorList[item.bgColorIndex]}--light`]"
|
|
@tap="navOptionsPage(item.url)"
|
|
>
|
|
<view class="list__content">
|
|
<view class="list__content__title">{{ item.title }}</view>
|
|
<view class="list__content__desc">{{ item.desc }}</view>
|
|
</view>
|
|
<view class="list__icon">
|
|
<view class="list__icon__main" :class="[`tn-icon-${item.mainIcon}`, `tn-main-gradient-${tuniaoColorList[item.bgColorIndex]}`]"></view>
|
|
<view class="list__icon__sub" :class="[`tn-icon-${item.subIcon}`, `tn-main-gradient-${tuniaoColorList[item.bgColorIndex]}`]"></view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'multiple-options-demo',
|
|
props: {
|
|
// 显示的列表数据
|
|
list: {
|
|
type: Array,
|
|
default() {
|
|
return []
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
// 图鸟颜色列表
|
|
tuniaoColorList: [
|
|
'red',
|
|
'purplered',
|
|
'purple',
|
|
'bluepurple',
|
|
'aquablue',
|
|
'blue',
|
|
'indigo',
|
|
'cyan',
|
|
'teal',
|
|
'green',
|
|
'orange',
|
|
'orangered'
|
|
],
|
|
listData: []
|
|
}
|
|
},
|
|
watch: {
|
|
list(val) {
|
|
this.initList()
|
|
}
|
|
},
|
|
created() {
|
|
this.initList()
|
|
},
|
|
methods: {
|
|
// 初始化列表数据
|
|
initList() {
|
|
// 给列表添加背景颜色数据
|
|
this.listData = this.list.map((item, index) => {
|
|
item.bgColorIndex = this.getBgNum()
|
|
item.mainIcon = item?.mainIcon || 'computer-fill'
|
|
item.subIcon = item?.subIcon || 'share'
|
|
return item
|
|
})
|
|
},
|
|
// 跳转到对应的选项页面
|
|
navOptionsPage(url) {
|
|
uni.navigateTo({
|
|
url: url
|
|
})
|
|
},
|
|
// 获取酷炫背景随机数
|
|
getBgNum() {
|
|
return Math.floor((Math.random() * this.tuniaoColorList.length))
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.list {
|
|
|
|
&__item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: calc(100% - 60rpx);
|
|
margin: 108rpx 30rpx 0rpx 30rpx;
|
|
box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
&__content {
|
|
flex: 1;
|
|
// color: $tn-font-color;
|
|
margin: 34rpx 0rpx 27rpx 37rpx;
|
|
|
|
&__title {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
&__desc {
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
&__icon {
|
|
flex: 1;
|
|
margin-right: 26rpx;
|
|
position: relative;
|
|
|
|
&__main, &__sub {
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
position: absolute;
|
|
transition: transform 0.25s ease;
|
|
}
|
|
|
|
&__main {
|
|
font-size: 200rpx;
|
|
width: 190rpx;
|
|
line-height: 200rpx;
|
|
top: 0;
|
|
right: 0rpx;
|
|
transform: translateY(-60%);
|
|
}
|
|
&__sub {
|
|
font-size: 70rpx;
|
|
top: 0;
|
|
right: 175rpx;
|
|
transform: translateY(-5rpx);
|
|
}
|
|
}
|
|
}
|
|
</style>
|