Merge branch 'main' of https://gitlab.guxuan.icu/Leo_Ding/JinShan_uniapp
This commit is contained in:
Leo_Ding
commit
a5178d64f6
@ -1,5 +1,6 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<view class="copyright-section" :style="{bottom: footerHeight}">
|
<view class="copyright-section">
|
||||||
<view class="copyright-content">
|
<view class="copyright-content">
|
||||||
<text style="color: #ddd;padding-right: 20rpx;">——</text>
|
<text style="color: #ddd;padding-right: 20rpx;">——</text>
|
||||||
<image src="/static/imgs/index/logo.png" class="logo" mode="aspectFit"></image>
|
<image src="/static/imgs/index/logo.png" class="logo" mode="aspectFit"></image>
|
||||||
@ -14,43 +15,34 @@
|
|||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'gx-copyright',
|
name: 'gx-copyright',
|
||||||
props: {
|
|
||||||
footerHeight: {
|
|
||||||
type: String,
|
|
||||||
default: '130rpx' // 默认footer高度
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.copyright-section {
|
.copyright-section {
|
||||||
position: fixed;
|
position: relative; /* 改为相对定位 */
|
||||||
left: 0;
|
width: 100%;
|
||||||
right: 0;
|
padding: 20rpx 0;
|
||||||
bottom: 0;
|
background-color: transparent;
|
||||||
width: 100%;
|
opacity: 0.6;
|
||||||
padding: 20rpx 0;
|
margin-top: 40rpx; /* 增加一些顶部间距 */
|
||||||
background-color:transparent;
|
|
||||||
opacity: 0.6;
|
|
||||||
// z-index: 90; /* 确保在footer下方 */
|
|
||||||
|
|
||||||
.copyright-content {
|
.copyright-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
width: 150rpx;
|
width: 150rpx;
|
||||||
height: 50rpx;
|
height: 50rpx;
|
||||||
margin-right: 0rpx;
|
margin-right: 0rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright-text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
padding-left: 20rpx;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.copyright-text {
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #999;
|
|
||||||
padding-left: 20rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -110,14 +110,11 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view style="margin: 120rpx 0;">
|
|
||||||
<Copyright/>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
|
||||||
<!-- 底部导航 -->
|
<!-- 底部导航 -->
|
||||||
|
<Copyright/>
|
||||||
<Footer></Footer>
|
<Footer></Footer>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@ -277,9 +274,13 @@ export default {
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.container {
|
.container {
|
||||||
background: #f8faff;
|
background: #f8faff;
|
||||||
min-height: 100vh;
|
// min-height: 100vh;
|
||||||
padding-bottom: 120rpx;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
padding: 20rpx;
|
||||||
|
// min-height: 100vh;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-bottom: calc(190rpx);
|
||||||
|
|
||||||
.content-wrapper {
|
.content-wrapper {
|
||||||
width: 92%;
|
width: 92%;
|
||||||
|
|||||||
@ -668,7 +668,7 @@
|
|||||||
padding: 20rpx;
|
padding: 20rpx;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding-bottom: 120rpx;
|
padding-bottom: 190rpx;
|
||||||
}
|
}
|
||||||
.user-info-card {
|
.user-info-card {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
|||||||
@ -1,15 +1,13 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<!-- 引入头部组件 -->
|
<!-- 标签栏 -->
|
||||||
<view class="content">
|
<view class="content">
|
||||||
<!-- 标签栏 -->
|
|
||||||
<u-tabs
|
<u-tabs
|
||||||
:list="tabList"
|
:list="tabList"
|
||||||
lineWidth="30"
|
lineWidth="30"
|
||||||
lineColor="#3B8CFF"
|
lineColor="#3B8CFF"
|
||||||
:activeStyle="{
|
:activeStyle="{
|
||||||
color: '#303133',
|
color: '#3B8CFF',
|
||||||
fontWeight: 'bold',
|
fontWeight: 'bold',
|
||||||
transform: 'scale(1.05)'
|
transform: 'scale(1.05)'
|
||||||
}"
|
}"
|
||||||
@ -17,48 +15,67 @@
|
|||||||
color: '#606266',
|
color: '#606266',
|
||||||
transform: 'scale(1)'
|
transform: 'scale(1)'
|
||||||
}"
|
}"
|
||||||
itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;width:90px"
|
itemStyle="padding-left: 15px; padding-right: 15px; height: 34px"
|
||||||
@change="handleTabChange"
|
@change="handleTabChange"
|
||||||
></u-tabs>
|
></u-tabs>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="content_wapper">
|
<view class="content_wapper">
|
||||||
<view class="content_list">
|
<view class="content_list">
|
||||||
<!-- 工单列表 -->
|
<!-- 工单列表 -->
|
||||||
<view v-for="(order, index) in filteredOrders" :key="index" class="order-item" @click="goDetail(order)">
|
<view
|
||||||
|
v-for="(order, index) in filteredOrders"
|
||||||
|
:key="index"
|
||||||
|
class="order-item"
|
||||||
|
:class="{'order-item--special': order.status === 2}"
|
||||||
|
@click="goDetail(order)"
|
||||||
|
>
|
||||||
<view class="order-title">
|
<view class="order-title">
|
||||||
<view class="title">
|
<view class="title">
|
||||||
<view class="title-text">{{ order.title }}</view>
|
<view class="title-text">
|
||||||
<u-tag
|
<text :style="{color: getStatusColor(order.status)}">●</text>
|
||||||
size="mini"
|
<text> {{order.title}}</text>
|
||||||
:text="getStatusText(order.status)"
|
</view>
|
||||||
:type="getStatusType(order.status)"
|
<u-tag
|
||||||
plain
|
size="mini"
|
||||||
></u-tag>
|
:text="getStatusText(order.status)"
|
||||||
</view>
|
:type="getStatusType(order.status)"
|
||||||
<view class="date">{{ formatTime(order.createdAt,"YYYY-MM-DD") }}</view>
|
:style="{
|
||||||
|
backgroundColor: getStatusBgColor(order.status),
|
||||||
|
color: getStatusColor(order.status),
|
||||||
|
borderColor: getStatusColor(order.status)
|
||||||
|
}"
|
||||||
|
></u-tag>
|
||||||
|
</view>
|
||||||
|
<view class="date">{{ formatTime(order.createdAt,"YYYY-MM-DD") }}</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="order-description">{{ order.content }}</view>
|
<view class="order-description">{{ order.content }}</view>
|
||||||
<button
|
<view class="order-meta">
|
||||||
@click.stop="handleAction(order)"
|
<!-- <text class="meta-item">{{ order.label || '通用问题' }}</text> -->
|
||||||
class="order-action"
|
<button
|
||||||
v-if="order.status === 2"
|
@click.stop="handleAction(order, $event)"
|
||||||
>撤回</button>
|
class="order-action"
|
||||||
|
v-if="order.status == 2"
|
||||||
|
>
|
||||||
|
撤回
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 空状态提示 -->
|
|
||||||
<u-empty
|
|
||||||
textSize="24"
|
|
||||||
width="180px"
|
|
||||||
height="780px"
|
|
||||||
v-if="filteredOrders.length === 0"
|
|
||||||
mode="data"
|
|
||||||
icon="/static/imgs/noData.png"
|
|
||||||
></u-empty>
|
|
||||||
</view>
|
</view>
|
||||||
|
<!-- 空状态提示 -->
|
||||||
|
<u-empty
|
||||||
|
textSize="24"
|
||||||
|
width="180px"
|
||||||
|
height="780px"
|
||||||
|
v-if="filteredOrders.length === 0"
|
||||||
|
mode="data"
|
||||||
|
icon="/static/imgs/noData.jpeg"
|
||||||
|
></u-empty>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- <Footer></Footer> -->
|
<!-- <Footer></Footer> -->
|
||||||
|
|
||||||
<!-- 固定在右侧的发布工单按钮 -->
|
<!-- 发布工单按钮 -->
|
||||||
<view class="fab-container">
|
<view class="fab-container">
|
||||||
<view class="fab-button" @click="openPublishForm">
|
<view class="fab-button" @click="openPublishForm">
|
||||||
<text class="fab-icon">+</text>
|
<text class="fab-icon">+</text>
|
||||||
@ -69,7 +86,6 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Footer from '@/components/footer_common.vue';
|
import Footer from '@/components/footer_common.vue';
|
||||||
import { get, post } from '@/utils/request';
|
|
||||||
import { IMAGE_BASE_URL,BASE_URL } from '@/utils/config';
|
import { IMAGE_BASE_URL,BASE_URL } from '@/utils/config';
|
||||||
import { formatTime, formatRelativeTime } from '@/utils/timeFormat';
|
import { formatTime, formatRelativeTime } from '@/utils/timeFormat';
|
||||||
|
|
||||||
@ -103,6 +119,30 @@
|
|||||||
this.getReciprocitiesList();
|
this.getReciprocitiesList();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// 获取状态对应的颜色
|
||||||
|
getStatusColor(status) {
|
||||||
|
const colorMap = {
|
||||||
|
1: '#FF7D00', // 待审核-橙色
|
||||||
|
2: '#00B42A', // 进行中-绿色
|
||||||
|
3: '#86909C', // 已完成-灰色
|
||||||
|
99: '#F53F3F', // 驳回-红色
|
||||||
|
98: '#86909C' // 已撤回-灰色
|
||||||
|
};
|
||||||
|
return colorMap[status] || '#86909C';
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取状态标签背景色
|
||||||
|
getStatusBgColor(status) {
|
||||||
|
const colorMap = {
|
||||||
|
1: 'rgba(255, 125, 0, 0.1)', // 待审核-浅橙
|
||||||
|
2: 'rgba(0, 180, 42, 0.1)', // 进行中-浅绿
|
||||||
|
3: 'rgba(134, 144, 156, 0.1)', // 已完成-浅灰
|
||||||
|
99: 'rgba(245, 63, 63, 0.1)', // 驳回-浅红
|
||||||
|
98: 'rgba(134, 144, 156, 0.1)' // 已撤回-浅灰
|
||||||
|
};
|
||||||
|
return colorMap[status] || 'rgba(134, 144, 156, 0.1)';
|
||||||
|
},
|
||||||
|
|
||||||
// 获取状态对应的文本
|
// 获取状态对应的文本
|
||||||
getStatusText(status) {
|
getStatusText(status) {
|
||||||
const statusMap = {
|
const statusMap = {
|
||||||
@ -119,7 +159,7 @@
|
|||||||
getStatusType(status) {
|
getStatusType(status) {
|
||||||
const typeMap = {
|
const typeMap = {
|
||||||
1: 'warning',
|
1: 'warning',
|
||||||
2: 'warning',
|
2: 'success',
|
||||||
3: 'success',
|
3: 'success',
|
||||||
98:'error'
|
98:'error'
|
||||||
};
|
};
|
||||||
@ -134,7 +174,6 @@
|
|||||||
|
|
||||||
// 切换tabs
|
// 切换tabs
|
||||||
handleTabChange(index) {
|
handleTabChange(index) {
|
||||||
console.log("======index",index)
|
|
||||||
this.currentTab = index.value;
|
this.currentTab = index.value;
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -143,10 +182,8 @@
|
|||||||
uni.navigateTo({ url: '/pages/helpInfo/index' });
|
uni.navigateTo({ url: '/pages/helpInfo/index' });
|
||||||
},
|
},
|
||||||
|
|
||||||
handleAction(order) {
|
handleAction(order, e) {
|
||||||
// 阻止事件冒泡
|
e.stopPropagation();
|
||||||
event.stopPropagation();
|
|
||||||
|
|
||||||
if (order.status === 2) {
|
if (order.status === 2) {
|
||||||
uni.showModal({
|
uni.showModal({
|
||||||
title: '提示',
|
title: '提示',
|
||||||
@ -213,143 +250,179 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
// 定义全局变量
|
// 丰富色彩的样式变量
|
||||||
$primary-color: #1890ff;
|
$primary-color: #3B8CFF; // 主色调-蓝色
|
||||||
$light-bg: #f0f8ff;
|
$secondary-color: #FF7D00; // 辅助色-橙色
|
||||||
$text-color: #333;
|
$success-color: #00B42A; // 成功色-绿色
|
||||||
$sub-text-color: #3D3D3D;
|
$danger-color: #F53F3F; // 危险色-红色
|
||||||
$disabled-text-color: #999;
|
$gray-color: #86909C; // 灰色
|
||||||
$fab-bg: $primary-color; // 发布按钮背景色
|
$light-bg: #F7F8FA; // 页面背景
|
||||||
$fab-shadow: 0 4rpx 16rpx rgba(24, 144, 255, 0.3); // 按钮阴影效果
|
$card-bg: #FFFFFF; // 卡片背景
|
||||||
|
|
||||||
|
// 渐变色定义
|
||||||
|
$gradient-primary: linear-gradient(135deg, $primary-color, #5aa7ff);
|
||||||
|
$gradient-active: linear-gradient(135deg, #e6f7ff, #ccf0ff);
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
opacity: 1;
|
background-color: $light-bg;
|
||||||
background: linear-gradient(0deg, rgba(240, 240, 240, 1) 0%, rgba(255, 250, 250, 0) 100%),
|
|
||||||
linear-gradient(0deg, rgba(255, 241, 235, 1) 0%, rgba(192, 219, 250, 1) 100%);
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: absolute;
|
padding: 15rpx 0;
|
||||||
margin-top: 20rpx;
|
background-color: $card-bg;
|
||||||
background-color: rgba(252, 252, 252, 0.8);
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
|
||||||
padding-bottom: 16rpx;
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 10;
|
||||||
|
|
||||||
|
::v-deep .u-tabs {
|
||||||
|
padding: 0 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 标签栏下划线动画
|
||||||
|
::v-deep .u-tabs__line {
|
||||||
|
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.content_wapper {
|
.content_wapper {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
padding: 25rpx 0 140rpx;
|
||||||
position: absolute;
|
box-sizing: border-box;
|
||||||
margin-top: 120rpx;
|
|
||||||
background-color: rgba(252, 252, 252, 0.8);
|
|
||||||
|
|
||||||
.content_list {
|
.content_list {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0 20rpx;
|
padding: 0 25rpx;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
.order-item {
|
.order-item {
|
||||||
display: flex;
|
width: 90%;
|
||||||
flex-direction: column;
|
margin: 0 auto 25rpx;
|
||||||
width: 95%;
|
border-radius: 16rpx;
|
||||||
margin: 20rpx auto;
|
padding: 30rpx;
|
||||||
border-radius: 10rpx;
|
background-color: $card-bg;
|
||||||
margin-bottom: 40rpx;
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
|
||||||
padding:40rpx 20rpx;
|
|
||||||
border-radius: 14.17px;
|
|
||||||
background: linear-gradient(90deg, rgba(199, 222, 255, 0.5) 0%, rgba(255, 255, 255, 0.72) 100%);
|
|
||||||
box-shadow: 0px 2px 4px rgba(191, 218, 255, 0.58);
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
|
||||||
|
transform: translateY(-3rpx);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 为进行中的工单添加特殊标识
|
||||||
|
&--special {
|
||||||
|
border-left: 6rpx solid $success-color;
|
||||||
|
}
|
||||||
|
|
||||||
.order-title {
|
.order-title {
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
.title{
|
align-items: center;
|
||||||
width: 90%;
|
margin-bottom: 25rpx;
|
||||||
font-weight: bold;
|
|
||||||
|
.title {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8rpx;
|
gap: 15rpx;
|
||||||
.title-text{
|
|
||||||
white-space: nowrap;
|
.title-text {
|
||||||
overflow: hidden;
|
color: #1D2129;
|
||||||
text-overflow: ellipsis;
|
font-weight: 600;
|
||||||
max-width: 200rpx;
|
font-size: 28rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.date{
|
|
||||||
width: 40%;
|
.date {
|
||||||
font-weight: normal;
|
color: $gray-color;
|
||||||
text-align: right;
|
font-size: 24rpx;
|
||||||
|
padding: 5rpx 10rpx;
|
||||||
|
background-color: rgba(134, 144, 156, 0.08);
|
||||||
|
border-radius: 6rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.order-description {
|
.order-description {
|
||||||
font-size: 26rpx;
|
font-size: 28rpx;
|
||||||
color: $sub-text-color;
|
color: #1D2129;
|
||||||
margin-top: 10rpx;
|
line-height: 1.7;
|
||||||
margin-bottom: 30rpx;
|
margin-bottom: 30rpx;
|
||||||
display: -webkit-box;
|
padding-bottom: 20rpx;
|
||||||
-webkit-box-orient: vertical;
|
border-bottom: 1px dashed #EEEEEE;
|
||||||
overflow: hidden;
|
word-break: break-word;
|
||||||
text-overflow: ellipsis;
|
}
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
line-height: 50rpx;
|
.order-meta {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.meta-item {
|
||||||
|
color: $gray-color;
|
||||||
|
font-size: 24rpx;
|
||||||
|
padding: 3rpx 12rpx;
|
||||||
|
background-color: rgba(134, 144, 156, 0.08);
|
||||||
|
border-radius: 15rpx;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.order-action {
|
.order-action {
|
||||||
margin-top: 40rpx;
|
min-width: 130rpx;
|
||||||
width: 120rpx;
|
height: 56rpx;
|
||||||
height: 40rpx;
|
line-height: 56rpx;
|
||||||
line-height: 40rpx;
|
background-color: $danger-color;
|
||||||
text-align: center;
|
|
||||||
background-color: $primary-color;
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-radius: 10rpx;
|
border-radius: 28rpx;
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
margin-top: 20rpx;
|
margin: 0;
|
||||||
position: absolute;
|
padding: 0;
|
||||||
right: 20rpx;
|
transition: all 0.2s;
|
||||||
bottom: 20rpx;
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #e02020;
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 右侧固定发布按钮样式
|
// 发布按钮增强
|
||||||
.fab-container {
|
.fab-container {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right: 20rpx;
|
right: 40rpx;
|
||||||
bottom: 220rpx;
|
bottom: 220rpx;
|
||||||
z-index: 100; // 确保按钮在最上层
|
z-index: 100;
|
||||||
transition: all 0.3s ease; // 动画过渡效果
|
|
||||||
|
|
||||||
// 悬停放大效果
|
.fab-button {
|
||||||
&:hover .fab-button {
|
width: 130rpx;
|
||||||
transform: scale(1.1);
|
height: 130rpx;
|
||||||
box-shadow: $fab-shadow, 0 0 0 10rpx rgba(24, 144, 255, 0.1);
|
border-radius: 50%;
|
||||||
|
background: $gradient-primary;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
box-shadow: 0 8rpx 20rpx rgba(59, 140, 255, 0.45);
|
||||||
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
border: 5rpx solid rgba(255, 255, 255, 0.3);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: scale(1.1) rotate(90deg);
|
||||||
|
box-shadow: 0 10rpx 25rpx rgba(59, 140, 255, 0.55);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.fab-button {
|
.fab-icon {
|
||||||
width: 100rpx;
|
color: white;
|
||||||
height: 100rpx;
|
font-size: 65rpx;
|
||||||
border-radius: 50%;
|
font-weight: bold;
|
||||||
background-color: $fab-bg;
|
line-height: 1;
|
||||||
display: flex;
|
text-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);
|
||||||
justify-content: center;
|
}
|
||||||
align-items: center;
|
|
||||||
box-shadow: $fab-shadow;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 60rpx;
|
|
||||||
font-weight: bold;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fab-icon {
|
|
||||||
line-height: 1;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -1,15 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<!-- 引入头部组件 -->
|
<!-- 标签栏 -->
|
||||||
<view class="content">
|
<view class="content">
|
||||||
|
|
||||||
<!-- 标签栏 -->
|
|
||||||
<u-tabs
|
<u-tabs
|
||||||
:list="tabList"
|
:list="tabList"
|
||||||
lineWidth="30"
|
lineWidth="30"
|
||||||
lineColor="#3B8CFF"
|
lineColor="#3B8CFF"
|
||||||
:activeStyle="{
|
:activeStyle="{
|
||||||
color: '#303133',
|
color: '#3B8CFF',
|
||||||
fontWeight: 'bold',
|
fontWeight: 'bold',
|
||||||
transform: 'scale(1.05)'
|
transform: 'scale(1.05)'
|
||||||
}"
|
}"
|
||||||
@ -17,32 +15,51 @@
|
|||||||
color: '#606266',
|
color: '#606266',
|
||||||
transform: 'scale(1)'
|
transform: 'scale(1)'
|
||||||
}"
|
}"
|
||||||
itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;width:60px"
|
itemStyle="padding-left: 15px; padding-right: 15px; height: 34px"
|
||||||
@change="handleTabChange"
|
@change="handleTabChange"
|
||||||
></u-tabs>
|
></u-tabs>
|
||||||
|
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="content_wapper">
|
<view class="content_wapper">
|
||||||
<view class="content_list">
|
<view class="content_list">
|
||||||
<!-- 工单列表 -->
|
<!-- 工单列表 -->
|
||||||
<view v-for="(order, index) in filteredOrders" :key="index" class="order-item"
|
<view
|
||||||
@click="goDetail(order)">
|
v-for="(order, index) in filteredOrders"
|
||||||
|
:key="index"
|
||||||
|
class="order-item"
|
||||||
|
:class="{'order-item--special': order.status === 2}"
|
||||||
|
@click="goDetail(order)"
|
||||||
|
>
|
||||||
<view class="order-title">
|
<view class="order-title">
|
||||||
<view class="title">
|
<view class="title">
|
||||||
<view class="title-text">我的工单</view>
|
<view class="title-text">
|
||||||
|
<text :style="{color: getStatusColor(order.status)}">●</text>
|
||||||
|
<!-- <text> 我的工单 </text> -->
|
||||||
|
</view>
|
||||||
<u-tag
|
<u-tag
|
||||||
size="mini"
|
size="mini"
|
||||||
:text="getStatusText(order.status)"
|
:text="getStatusText(order.status)"
|
||||||
:type="getStatusType(order.status)"
|
:type="getStatusType(order.status)"
|
||||||
plain
|
:style="{
|
||||||
|
backgroundColor: getStatusBgColor(order.status),
|
||||||
|
color: getStatusColor(order.status),
|
||||||
|
borderColor: getStatusColor(order.status)
|
||||||
|
}"
|
||||||
></u-tag>
|
></u-tag>
|
||||||
</view>
|
</view>
|
||||||
<view class="date">{{ formatTime(order.createdAt,"YYYY-MM-DD") }}</view>
|
<view class="date">{{ formatTime(order.createdAt,"YYYY-MM-DD") }}</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="order-description">{{ order.title }}</view>
|
<view class="order-description">{{ order.title }}</view>
|
||||||
<button @click.stop="handleAction(order, $event)" class="order-action" v-if="order.status == 1 || order.status == 2 || order.status == 99">撤回</button>
|
<view class="order-meta">
|
||||||
|
<text class="meta-item">{{ order.label || '通用问题' }}</text>
|
||||||
|
<button
|
||||||
|
@click.stop="handleAction(order, $event)"
|
||||||
|
class="order-action"
|
||||||
|
v-if="order.status == 1 || order.status == 2 || order.status == 99"
|
||||||
|
>
|
||||||
|
撤回
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 空状态提示 -->
|
<!-- 空状态提示 -->
|
||||||
@ -54,32 +71,26 @@
|
|||||||
mode="data"
|
mode="data"
|
||||||
icon="/static/imgs/noData.jpeg"
|
icon="/static/imgs/noData.jpeg"
|
||||||
></u-empty>
|
></u-empty>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<Footer></Footer>
|
<Footer></Footer>
|
||||||
|
|
||||||
<!-- 新增的发布工单按钮 -->
|
<!-- 发布工单按钮 -->
|
||||||
<view class="fab-container">
|
<view class="fab-container">
|
||||||
<view class="fab-button" @click="showPublishForm">
|
<view class="fab-button" @click="showPublishForm">
|
||||||
<text class="fab-icon">+</text>
|
<text class="fab-icon">+</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// import Header from '@/components/header_common.vue';
|
|
||||||
import Footer from '@/components/footer_common.vue';
|
import Footer from '@/components/footer_common.vue';
|
||||||
import { get, post,put } from '@/utils/request';
|
import { get, post,put } from '@/utils/request';
|
||||||
import { IMAGE_BASE_URL,BASE_URL } from '@/utils/config';
|
import { IMAGE_BASE_URL,BASE_URL } from '@/utils/config';
|
||||||
import { formatTime, formatRelativeTime } from '@/utils/timeFormat';
|
import { formatTime, formatRelativeTime } from '@/utils/timeFormat';
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: { Footer },
|
||||||
Footer
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
tabList: [
|
tabList: [
|
||||||
@ -108,7 +119,30 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 获取状态对应的文本
|
// 新增：获取状态对应的颜色
|
||||||
|
getStatusColor(status) {
|
||||||
|
const colorMap = {
|
||||||
|
1: '#FF7D00', // 待审核-橙色
|
||||||
|
2: '#00B42A', // 进行中-绿色
|
||||||
|
3: '#86909C', // 已完成-灰色
|
||||||
|
99: '#F53F3F', // 驳回-红色
|
||||||
|
98: '#86909C' // 已撤回-灰色
|
||||||
|
};
|
||||||
|
return colorMap[status] || '#86909C';
|
||||||
|
},
|
||||||
|
|
||||||
|
// 新增：获取状态标签背景色
|
||||||
|
getStatusBgColor(status) {
|
||||||
|
const colorMap = {
|
||||||
|
1: 'rgba(255, 125, 0, 0.1)', // 待审核-浅橙
|
||||||
|
2: 'rgba(0, 180, 42, 0.1)', // 进行中-浅绿
|
||||||
|
3: 'rgba(134, 144, 156, 0.1)', // 已完成-浅灰
|
||||||
|
99: 'rgba(245, 63, 63, 0.1)', // 驳回-浅红
|
||||||
|
98: 'rgba(134, 144, 156, 0.1)' // 已撤回-浅灰
|
||||||
|
};
|
||||||
|
return colorMap[status] || 'rgba(134, 144, 156, 0.1)';
|
||||||
|
},
|
||||||
|
|
||||||
getStatusText(status) {
|
getStatusText(status) {
|
||||||
const statusMap = {
|
const statusMap = {
|
||||||
'': '全部',
|
'': '全部',
|
||||||
@ -121,7 +155,6 @@
|
|||||||
return statusMap[status] || '未知状态';
|
return statusMap[status] || '未知状态';
|
||||||
},
|
},
|
||||||
|
|
||||||
// 获取状态对应的标签类型
|
|
||||||
getStatusType(status) {
|
getStatusType(status) {
|
||||||
const typeMap = {
|
const typeMap = {
|
||||||
1:'warning',
|
1:'warning',
|
||||||
@ -132,87 +165,70 @@
|
|||||||
};
|
};
|
||||||
return typeMap[status] || 'info';
|
return typeMap[status] || 'info';
|
||||||
},
|
},
|
||||||
|
|
||||||
handleBack() {
|
handleBack() {
|
||||||
uni.navigateBack({
|
uni.navigateBack({ delta: 1 });
|
||||||
delta: 1 // 返回上一级页面
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
// 切换tabs
|
|
||||||
handleTabChange(index) {
|
handleTabChange(index) {
|
||||||
console.log("======index",index)
|
|
||||||
this.currentTab = index.value;
|
this.currentTab = index.value;
|
||||||
},
|
},
|
||||||
// 显示发布工单表单
|
|
||||||
showPublishForm() {
|
showPublishForm() {
|
||||||
// 这里可以添加打开发布表单的逻辑
|
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '即将打开发布工单表单',
|
title: '即将打开发布工单表单',
|
||||||
icon: 'none'
|
icon: 'none'
|
||||||
});
|
});
|
||||||
|
|
||||||
uni.navigateTo({ url: '/pages/serviceTickets/index' });
|
uni.navigateTo({ url: '/pages/serviceTickets/index' });
|
||||||
},
|
},
|
||||||
// 工单操作处理
|
|
||||||
handleAction(order, e) {
|
|
||||||
// 阻止事件冒泡
|
|
||||||
e.stopPropagation();
|
|
||||||
|
|
||||||
|
handleAction(order, e) {
|
||||||
|
e.stopPropagation();
|
||||||
if (order.status == 1 || order.status == 2 || order.status == 99) {
|
if (order.status == 1 || order.status == 2 || order.status == 99) {
|
||||||
uni.showModal({
|
uni.showModal({
|
||||||
title: '提示',
|
title: '提示',
|
||||||
content: '确定要撤回这个工单吗？',
|
content: '确定要撤回这个工单吗？',
|
||||||
success: (res) => {
|
success: (res) => {
|
||||||
if (res.confirm) {
|
if (res.confirm) {
|
||||||
// 执行撤回逻辑
|
|
||||||
this.withdrawOrder(order.id);
|
this.withdrawOrder(order.id);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
async withdrawOrder(orderId) {
|
async withdrawOrder(orderId) {
|
||||||
try {
|
try {
|
||||||
const res = await put(`/api/v1/app_auth/work-order/${orderId}`, {status:98});
|
const res = await put(`/api/v1/app_auth/work-order/${orderId}`, {status:98});
|
||||||
if (res?.success) {
|
if (res?.success) {
|
||||||
uni.showToast({
|
uni.showToast({ title: '工单已撤回', icon: 'success' });
|
||||||
title: '工单已撤回',
|
|
||||||
icon: 'success'
|
|
||||||
});
|
|
||||||
// 刷新列表
|
|
||||||
this.getWorkOrderList();
|
this.getWorkOrderList();
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error('撤回工单失败:', err);
|
console.error('撤回工单失败:', err);
|
||||||
uni.showToast({
|
uni.showToast({ title: '撤回失败', icon: 'none' });
|
||||||
title: '撤回失败',
|
|
||||||
icon: 'none'
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
goDetail(i){
|
goDetail(i){
|
||||||
uni.setStorageSync("Detail",i)
|
uni.setStorageSync("Detail",i)
|
||||||
uni.navigateTo({ url: '/pages/myTicketsDetail/index' });
|
uni.navigateTo({ url: '/pages/myTicketsDetail/index' });
|
||||||
},
|
},
|
||||||
// 请求列表接口
|
|
||||||
async getWorkOrderList(){
|
async getWorkOrderList(){
|
||||||
if (this.isLoading) return;
|
if (this.isLoading) return;
|
||||||
this.isLoading = true;
|
this.isLoading = true;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const res = await get('/api/v1/app_auth/my/work-order', {
|
const res = await get('/api/v1/app_auth/my/work-order', {
|
||||||
current: 1,
|
current: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
});
|
});
|
||||||
|
|
||||||
if (res?.success) {
|
if (res?.success) {
|
||||||
this.orders = res.data || [];
|
this.orders = res.data || [];
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error('获取我的求助失败:', err);
|
console.error('获取我的求助失败:', err);
|
||||||
uni.showToast({
|
uni.showToast({ title: '加载列表失败', icon: 'none' });
|
||||||
title: '加载列表失败',
|
|
||||||
icon: 'none'
|
|
||||||
});
|
|
||||||
} finally {
|
} finally {
|
||||||
this.isLoading = false;
|
this.isLoading = false;
|
||||||
}
|
}
|
||||||
@ -222,157 +238,179 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
// 定义全局变量
|
// 丰富色彩的样式变量
|
||||||
$primary-color: #1890ff;
|
$primary-color: #3B8CFF; // 主色调-蓝色
|
||||||
$light-bg: #f0f8ff;
|
$secondary-color: #FF7D00; // 辅助色-橙色
|
||||||
$text-color: #333;
|
$success-color: #00B42A; // 成功色-绿色
|
||||||
$sub-text-color: #3D3D3D;
|
$danger-color: #F53F3F; // 危险色-红色
|
||||||
$disabled-text-color: #999;
|
$gray-color: #86909C; // 灰色
|
||||||
$fab-color: #1890ff; // 发布按钮颜色
|
$light-bg: #F7F8FA; // 页面背景
|
||||||
|
$card-bg: #FFFFFF; // 卡片背景
|
||||||
|
|
||||||
|
// 渐变色定义
|
||||||
|
$gradient-primary: linear-gradient(135deg, $primary-color, #5aa7ff);
|
||||||
|
$gradient-active: linear-gradient(135deg, #e6f7ff, #ccf0ff);
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
/* 占满整个视口高度 */
|
background-color: $light-bg;
|
||||||
opacity: 1;
|
|
||||||
background: linear-gradient(0deg, rgba(240, 240, 240, 1) 0%, rgba(255, 250, 250, 0) 100%),
|
|
||||||
linear-gradient(0deg, rgba(255, 241, 235, 1) 0%, rgba(192, 219, 250, 1) 100%);
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: absolute;
|
padding: 15rpx 0;
|
||||||
margin-top: 20rpx;
|
background-color: $card-bg;
|
||||||
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
|
||||||
background-color: rgba(252, 252, 252, 0.8);
|
position: sticky;
|
||||||
padding-bottom: 16rpx;
|
top: 0;
|
||||||
|
z-index: 10;
|
||||||
|
|
||||||
|
::v-deep .u-tabs {
|
||||||
|
padding: 0 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 标签栏下划线动画
|
||||||
|
::v-deep .u-tabs__line {
|
||||||
|
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.content_wapper {
|
.content_wapper {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
padding: 25rpx 0 140rpx;
|
||||||
position: absolute;
|
box-sizing: border-box;
|
||||||
margin-top: 120rpx;
|
|
||||||
background-color: rgba(252, 252, 252, 0.8);
|
|
||||||
padding-bottom: 10vh;
|
|
||||||
|
|
||||||
.content_list {
|
.content_list {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0 20rpx;
|
padding: 0 25rpx;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
.order-item {
|
.order-item {
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
width: 90%;
|
width: 90%;
|
||||||
margin: 20rpx auto;
|
margin: 0 0 25rpx;
|
||||||
border-radius: 10rpx;
|
border-radius: 16rpx;
|
||||||
margin-bottom: 40rpx;
|
padding: 30rpx;
|
||||||
padding:40rpx 20rpx;
|
background-color: $card-bg;
|
||||||
border-radius: 14.17px;
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
|
||||||
background: linear-gradient(90deg, rgba(199, 222, 255, 0.5) 0%, rgba(255, 255, 255, 0.72) 100%);
|
|
||||||
box-shadow: 0px 2px 4px rgba(191, 218, 255, 0.58);
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
|
||||||
|
transform: translateY(-3rpx);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 为进行中的工单添加特殊标识
|
||||||
|
&--special {
|
||||||
|
border-left: 6rpx solid $success-color;
|
||||||
|
}
|
||||||
|
|
||||||
.order-title {
|
.order-title {
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
.title{
|
align-items: center;
|
||||||
width: 90%;
|
margin-bottom: 25rpx;
|
||||||
font-weight: bold;
|
|
||||||
|
.title {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8rpx;
|
gap: 15rpx;
|
||||||
|
|
||||||
.title-text{
|
.title-text {
|
||||||
white-space: nowrap;
|
color: #1D2129;
|
||||||
overflow: hidden;
|
font-weight: 600;
|
||||||
text-overflow: ellipsis;
|
font-size: 28rpx;
|
||||||
max-width: 200rpx;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
|
||||||
.date{
|
|
||||||
width: 40%;
|
|
||||||
font-weight: normal;
|
|
||||||
text-align: right;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.date {
|
||||||
|
color: $gray-color;
|
||||||
|
font-size: 24rpx;
|
||||||
|
padding: 5rpx 10rpx;
|
||||||
|
background-color: rgba(134, 144, 156, 0.08);
|
||||||
|
border-radius: 6rpx;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.order-description {
|
.order-description {
|
||||||
font-size: 26rpx;
|
font-size: 28rpx;
|
||||||
color: $sub-text-color;
|
color: #1D2129;
|
||||||
margin-top: 10rpx;
|
line-height: 1.7;
|
||||||
margin-bottom: 30rpx;
|
margin-bottom: 30rpx;
|
||||||
display: -webkit-box;
|
padding-bottom: 20rpx;
|
||||||
-webkit-box-orient: vertical;
|
border-bottom: 1px dashed #EEEEEE;
|
||||||
overflow: hidden;
|
word-break: break-word;
|
||||||
text-overflow: ellipsis;
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
line-height: 50rpx;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.order-status {
|
.order-meta {
|
||||||
font-size: 22rpx;
|
display: flex;
|
||||||
color: $text-color;
|
justify-content: space-between;
|
||||||
margin-top: 10rpx;
|
align-items: center;
|
||||||
width: 100rpx;
|
|
||||||
|
.meta-item {
|
||||||
|
color: $gray-color;
|
||||||
|
font-size: 24rpx;
|
||||||
|
padding: 3rpx 12rpx;
|
||||||
|
background-color: rgba(134, 144, 156, 0.08);
|
||||||
|
border-radius: 15rpx;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.order-action {
|
.order-action {
|
||||||
margin-top: 40rpx;
|
min-width: 130rpx;
|
||||||
width: 120rpx;
|
height: 56rpx;
|
||||||
height: 40rpx;
|
line-height: 56rpx;
|
||||||
line-height: 40rpx;
|
background-color: $danger-color;
|
||||||
text-align: center;
|
|
||||||
background-color: $primary-color;
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-radius: 10rpx;
|
border-radius: 28rpx;
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
margin-top: 20rpx;
|
margin: 0;
|
||||||
position: absolute;
|
padding: 0;
|
||||||
right: 20rpx;
|
transition: all 0.2s;
|
||||||
bottom: 20rpx;
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #e02020;
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 新增的发布按钮样式
|
// 发布按钮增强
|
||||||
.fab-container {
|
.fab-container {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right: 20rpx;
|
right: 40rpx;
|
||||||
bottom: 220rpx;
|
bottom: 220rpx;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
// 添加悬停动画
|
|
||||||
&:hover .fab-button {
|
.fab-button {
|
||||||
transform: scale(1.1);
|
width: 130rpx;
|
||||||
|
height: 130rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: $gradient-primary;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
box-shadow: 0 8rpx 20rpx rgba(59, 140, 255, 0.45);
|
||||||
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
border: 5rpx solid rgba(255, 255, 255, 0.3);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: scale(1.1) rotate(90deg);
|
||||||
|
box-shadow: 0 10rpx 25rpx rgba(59, 140, 255, 0.55);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.fab-button {
|
.fab-icon {
|
||||||
width: 100rpx;
|
color: white;
|
||||||
height: 100rpx;
|
font-size: 65rpx;
|
||||||
border-radius: 50%;
|
font-weight: bold;
|
||||||
background-color: $fab-color;
|
line-height: 1;
|
||||||
display: flex;
|
text-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);
|
||||||
justify-content: center;
|
}
|
||||||
align-items: center;
|
|
||||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fab-icon {
|
|
||||||
color: white;
|
|
||||||
font-size: 60rpx;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -120,7 +120,7 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background: #f8faff;
|
background: #f8faff;
|
||||||
padding-bottom: 120rpx;
|
padding-bottom: calc(100rpx + 40rpx + 40rpx);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nearby-page {
|
.nearby-page {
|
||||||
|
|||||||
@ -140,7 +140,7 @@
|
|||||||
// height: 100vh;
|
// height: 100vh;
|
||||||
// padding: 70rpx 0;
|
// padding: 70rpx 0;
|
||||||
// margin-top: 90rpx;
|
// margin-top: 90rpx;
|
||||||
padding-bottom: 400rpx;
|
padding-bottom: calc(190rpx + 100rpx + 80rpx);
|
||||||
|
|
||||||
.neighbor_head {
|
.neighbor_head {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user