榆钱落尽槿花稀
448712ece5
本次提交主要包含以下内容： 1. 新增积分申请系统核心功能： - 添加登录页面及API接口 - 实现积分申请记录查看功能 - 集成微信小程序分享功能 - 添加请求管理工具类 2. 引入Tuniao UI组件库： - 添加时间线、折叠面板、表格等UI组件 - 集成头像组、单选框组等交互组件 - 配置全局样式和主题颜色 3. 基础架构搭建： - 配置项目manifest和pages.json路由 - 添加状态管理store - 实现自定义导航栏适配 - 添加工具函数(加解密、数字处理等) 4. 静态资源： - 添加项目logo和背景图片 - 配置uni.scss全局样式变量 本次提交为系统基础功能搭建，后续将进一步完善积分申请流程和审批功能。
95 lines
2.0 KiB
Vue
95 lines
2.0 KiB
Vue
<template>
|
||
<view class="demo-title">
|
||
<view>
|
||
<view v-if="type === 'first'" class="main_title">
|
||
<view v-if="leftIcon" class="main_title__icon main_title__icon--left" :class="[`tn-icon-${leftIcon}`]"></view>
|
||
<view class="main_title__content">{{ title }}</view>
|
||
<view v-if="rightIcon" class="main_title__icon main_title__icon--right" :class="[`tn-icon-${rightIcon}`]"></view>
|
||
</view>
|
||
<view v-if="type === 'second'" class="second_title">
|
||
<view class="second_title__content">{{ title }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="content" :class="[{
|
||
'content--padding': contentPadding
|
||
}]">
|
||
<slot></slot>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'demo-title',
|
||
options: {
|
||
// 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
|
||
virtualHost: true
|
||
},
|
||
props: {
|
||
// 标题类型
|
||
type: {
|
||
type: String,
|
||
default: 'first'
|
||
},
|
||
// 标题
|
||
title: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
// 左图标
|
||
leftIcon: {
|
||
type: String,
|
||
default: 'star'
|
||
},
|
||
// 右图标
|
||
rightIcon: {
|
||
type: String,
|
||
default: 'star'
|
||
},
|
||
// 内容容器是否有两边边距
|
||
contentPadding: {
|
||
type: Boolean,
|
||
default: true
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.main_title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 50rpx;
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
|
||
&__content {
|
||
padding: 0 18rpx;
|
||
}
|
||
|
||
&__icon {
|
||
font-size: 34rpx;
|
||
}
|
||
}
|
||
|
||
.second_title {
|
||
margin: 24rpx 0;
|
||
margin-left: 30rpx;
|
||
|
||
&__content {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
margin-top: 30rpx;
|
||
|
||
&--padding {
|
||
margin-left: 30rpx;
|
||
margin-right: 30rpx;
|
||
}
|
||
}
|
||
</style>
|