Files
yunxinwei-uniapp/pages/order/index.vue
2024-04-23 15:57:39 +08:00

948 lines
25 KiB
Vue
Executable File
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="container" :style="appThemeStyle">
<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }"
@down="downCallback" :up="upOption" @up="upCallback">
<!-- tab栏 -->
<u-tabs :list="tabs" :is-scroll="false" :current="curTab" :active-color="appTheme.mainBg" :duration="0.2"
@change="onChangeTab" />
<!-- 订单列表 -->
<view class="order-list">
<view class="order-item" v-for="(item, index) in list" :key="index" v-if="item.equipmentGoods">
<view class="item-top">
<view class="item-top-left">
<text class="order-time">{{ item.merchantName }}</text>
</view>
<view class="item-top-right">
<text class="state-text" v-if="item.payStatus == 10">待支付</text>
<text class="state-text" v-if="item.payStatus == 20 && item.deliveryStatus <= 20 && item.receiptStatus == 10">待收货</text>
<text class="state-text" v-if="item.payStatus == 20 && item.deliveryStatus == 20 && item.receiptStatus == 20">待绑定</text>
<!-- <text class="state-text" v-else-if="item.receiptStatus == 21">进行中</text> -->
<text class="state-text" v-if="item.payStatus == 20 && item.deliveryStatus == 40 && item.receiptStatus == 20">进行中</text>
<text class="state-text" v-else-if="item.payStatus == 20 && item.receiptStatus == 21">退租中</text>
<text class="state-text" v-else-if="item.payStatus == 20 && item.orderStatus == 40">已完成</text>
</view>
</view>
<!-- 商品列表 -->
<view class="goods-list" @click="handleTargetDetail(item.orderId)">
<view class="goods-item">
<!-- 商品图片 -->
<view class="goods-image">
<image v-if="item.image" :src="item.image" class="equipment-image" mode="aspectFit">
</image>
<image v-else class="image" src="/static/goods/battery.png" mode="scaleToFill"></image>
</view>
<!-- 商品信息 -->
<view class="goods-content">
<view class="goods-title">
<text class="twoline-hide">
下单类型
<span v-if="item.equipmentGoods.equipmentCategory == 10">销售</span>
<span v-if="item.equipmentGoods.equipmentCategory == 20">分期</span>
<span v-if="item.equipmentGoods.equipmentCategory == 30">以租代购</span>
<span v-if="item.equipmentGoods.equipmentCategory == 40">租赁</span>
</text>
<text class="twoline-hide">订单编号{{ item.orderNo }}</text>
<text class="twoline-hide"
v-if="item.orderStatus == 30">到期时间{{ item.expirationTime }}</text>
<text class="twoline-hide" v-else>下单时间{{ item.payTime }}</text>
<text class="twoline-hide">设备编号{{ item.equipment.equipmentCode ? item.equipment.equipmentCode : ''}}</text>
<text class="twoline-hide">设备名称{{ item.equipmentGoods.goodsName }}</text>
<text class="twoline-hide">设备型号{{ item.equipmentGoods.batteryModel }}</text>
<text class="twoline-hide">下单用户{{ item.nickname }}</text>
<text class="twoline-hide yuqi-text" v-if="item.payStatus == 10 && item.expirationDay < 0">逾期状态:
(已逾期{{ Math.abs(item.expirationDay) }})</text>
<text class="twoline-hide yuqi-text"
v-if="item.payStatus == 10 && item.expirationDay < 7 && item.expirationDay > 0">逾期状态: 即将过期</text>
<!-- <view class="order-total">
<text>合计:</text>
<text class="unit" style="color: #ff0000;"></text>
<text class="money">{{ item.totalPrice }}</text>
</view> -->
<!-- <text class="twoline-hide">合计{{ item.equipmentGoods.batteryModel }}</text> -->
<text class="twoline-hide" style="padding-left: 52rpx;">合计<span style="color: #ff0000;">{{ item.totalPrice }}</span></text>
</view>
</view>
<!-- 交易信息 -->
<!-- <view class="goods-trade">
<view class="goods-price">
<text class="unit"></text>
<text class="value">{{ item.batteryRent }}</text>
</view>
<view class="goods-num">
<text>x1</text>
</view>
</view> -->
</view>
</view>
<!-- 订单合计 -->
<!-- 订单操作 -->
<view v-if="item.orderStatus != OrderStatusEnum.CANCELLED.value" class="order-handle">
<view class="btn-group clearfix">
<!-- 未支付取消订单 -->
<block v-if="item.payStatus == PayStatusEnum.PENDING.value">
<view class="btn-item active" @click="onPay(item.orderId)">去支付</view>
<view class="btn-item" @click="onCancel(item.orderId)">取消</view>
</block>
<!-- 已支付进行中的订单 -->
<block v-if="item.orderStatus != OrderStatusEnum.APPLY_CANCEL.value">
<!-- 订单核销码 -->
<block v-if="item.payStatus == PayStatusEnum.SUCCESS.value && item.deliveryType == DeliveryTypeEnum.EXTRACT.value && item.deliveryStatus == DeliveryStatusEnum.NOT_DELIVERED.value">
<view class="btn-item active" @click="onExtractQRCode(item.orderId)">
<text class="iconfont icon-qr-extract"></text>
<text class="m-l-10">核销码</text>
</view>
</block>
</block>
<!-- 已申请取消 -->
<view v-else class="f-28 col-8">取消申请中</view>
<!-- 确认收货 -->
<block v-if="item.payStatus == PayStatusEnum.SUCCESS.value">
<view v-if="item.deliveryStatus <= 20 && item.receiptStatus == 10" class="btn-item active" @click="onReceipt(item.orderId)">确认收货</view>
<view v-else-if="item.orderStatus == 30 && item.deliveryStatus == 20 && item.receiptStatus == 20" class="btn-item active" @click="onBind(item)">绑定设备</view>
<view class="btn-item" @click="handleRentingOut(item)"
v-if="item.equipmentGoods.equipmentCategory != '10' && item.receiptStatus != 21 && item.receiptStatus != 30">我要退租</view>
<view class="btn-item" @click="handleRentingOutCancel(item)"
v-if="item.equipmentGoods.equipmentCategory != '10' && item.receiptStatus == 21">取消退租</view>
<view class="btn-item" @click="handleHireEquipment(item.orderId)"
v-if="item.equipmentGoods.equipmentCategory != '10' && item.receiptStatus != 30 && item.receiptStatus != 21 && item.orderId >= 28804 && item.deliveryStatus == 40">我要续费</view>
<block v-if="item.orderStatus == OrderStatusEnum.COMPLETED.value && item.isComment == 0">
<view class="btn-item" v-if="item.equipmentGoods.equipmentCategory == '40' && item.deliveryStatus == DeliveryStatusEnum.ACCEPT.value"
@click="handleChangeEquipment(item.orderId,item.equipment.equipmentId)">换电</view>
<!-- <view class="btn-item" v-if="item.equipmentGoods.equipmentCategory == '锂电池租赁' || item.equipmentGoods.equipmentCategory == '电动车租赁'" @click="handleTargetDetail(item.orderId)">续费</view> -->
</block>
</block>
<!-- 订单评价 -->
<view class="btn-item" @click="handleTargetDetail(item.orderId)">详情</view>
</view>
</view>
</view>
</view>
</mescroll-body>
<!-- 核销二维码弹窗 -->
<u-popup v-model="showQRCodePopup" mode="center" border-radius="26" :closeable="true">
<view class="qrcode-popup">
<view class="title">自提核销二维码</view>
<view class="pop-content">
<image v-if="qrcodeImage" class="image" :src="qrcodeImage"></image>
</view>
</view>
</u-popup>
<!-- 绑定设备码 -->
<u-popup v-model="showQRCodeBind" mode="center" border-radius="26" :closeable="true">
<view class="qrcode-bind">
<view class="title">请核对要绑定的设备编号是否正确</view>
<view class="bind-content">
<input v-model="bindValue" class="input" @confirm="onSearch" focus="true" placeholder="请输入设备编号"
type="text"></input>
</view>
<view class="submit">
<u-button type="error" @click="doBind">立即绑定</u-button>
</view>
</view>
</u-popup>
<!-- 换电 -->
<u-popup v-model="showQRCodeBindChange" mode="center" border-radius="26" :closeable="true">
<view class="qrcode-bind">
<view class="title">请输入更换的新电池编号</view>
<view class="bind-content">
<input v-model="bindValue" class="input" @confirm="onSearch" focus="true" placeholder="请输入设备编号"
type="text"></input>
</view>
<view class="submit">
<u-button type="error" @click="doEquipment(true)">确定更换电池</u-button>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import {
DeliveryStatusEnum,
DeliveryTypeEnum,
OrderStatusEnum,
PayStatusEnum,
ReceiptStatusEnum
} from '@/common/enum/order'
import store from '@/store/index.js'
import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
import {
getEmptyPaginateObj,
getMoreListData
} from '@/core/app'
import * as OrderApi from '@/api/order'
import {
wxPayment
} from '@/core/app'
import * as EquipmentApi from '@/websoft/api/equipment.js'
import {
pageOrder,
removeOrder,
receiptOrder,
addOrder,
getOrderPayByOrderId,
checkFreeze
} from '@/websoft/api/order.js'
/* import {
bindEquipment
} from '@/websoft/api/equipment.js' */
import {
uploadFile
} from '@/websoft/api/upload.js'
import {
fileUrl
} from '@/config.js';
import {
createOrderNo,
dateFormat
} from '@/utils/util.js'
// 每页记录数量
const pageSize = 15
// tab栏数据
const tabs = [{
name: `全部`,
value: 'all'
}, {
name: `待支付`,
value: 'payment'
},
{
name: `待绑定`,
value: 'delivery'
},
{
name: `进行中`,
value: 'comment'
},
{
name: `已完成`,
value: 'refund'
}
]
export default {
components: {
MescrollBody
},
mixins: [MescrollMixin],
data() {
return {
// 枚举类
DeliveryStatusEnum,
DeliveryTypeEnum,
OrderStatusEnum,
PayStatusEnum,
ReceiptStatusEnum,
// 当前页面参数
options: {
dataType: 'all'
},
// tab栏数据
tabs,
// 当前标签索引
curTab: 0,
// 订单列表数据
list: [],
// 上拉加载配置
upOption: {
// 首次自动执行
auto: true,
// 每页数据的数量; 默认10
page: {
size: pageSize
},
// 数量要大于4条才显示无更多数据
noMoreSize: 4,
// 空布局
empty: {
tip: '亲,暂无订单记录'
}
},
// 控制onShow事件是否刷新订单列表
canReset: false,
// 核销二维码弹窗
showQRCodePopup: false,
// 核销二维码图片url (通过后端获取)
qrcodeImage: '',
where: {},
showQRCodeBind: false,
bindValue: '',
// 选择的设备
equipment: {},
equipmentId: null,
showQRCodeBindChange: false,
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
// 初始化当前选中的标签
this.initCurTab(options)
// 注册全局事件订阅: 是否刷新订单列表
uni.$on('syncRefreshOrder', canReset => {
this.canReset = canReset
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
this.canReset && this.onRefreshList()
this.canReset = false
},
/**
* 生命周期函数--监听页面的卸载
*/
onUnload() {
// 卸载全局事件订阅
uni.$off('syncRefreshOrder')
},
methods: {
// 初始化当前选中的标签
initCurTab(options) {
const app = this
if (options.dataType) {
const index = app.tabs.findIndex(item => item.value == options.dataType)
app.curTab = index > -1 ? index : 0
}
},
/**
* 上拉加载的回调 (页面初始化时也会执行一次)
* 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
* @param {Object} page
*/
upCallback(page) {
const app = this
// 设置列表数据
app.getOrderList(page.num)
// .then(list => {
// console.log("list: ",list);
// const curPageLen = list.data.length
// const totalSize = list.data.total
// app.mescroll.endBySize(curPageLen, totalSize)
// })
// .catch(() => app.mescroll.endErr())
},
// 获取订单列表
getOrderList(pageNo = 1) {
const app = this
const {
curTab
} = this
// app.where.userId = uni.getStorageSync('userId')
console.log("curTab: ", curTab);
app.where = {}
if (curTab == 0) {
app.where = {}
}
if (curTab == 1) {
app.where.payStatus = 10;
}
if (curTab == 2) {
app.where.payStatus = 20;
app.where.receiptStatus = 10;
}
if (curTab == 3) {
app.where.payStatus = 20;
app.where.orderStatus = 30;
}
if (curTab == 4) {
app.where.payStatus = 20;
app.where.orderStatus = 40;
}
app.where.userId = uni.getStorageSync('userId');
app.where.isRenew = 0;
app.where.isApp = true;
app.where.isFreeze = 1;
pageOrder(app.where).then(res => {
app.list = res.data.list
const curPageLen = res.data.list.length
const totalSize = res.data.count
console.log("totalSize: ", totalSize);
app.mescroll.endBySize(curPageLen, totalSize)
app.list.map((d, index) => {
const setTime = new Date(d.expirationTime);
const nowTime = new Date();
const restSec = setTime.getTime() - nowTime.getTime();
// 剩余天数
const day = parseInt(restSec / (60 * 60 * 24 * 1000));
console.log("逾期天数: ", Math.abs(day));
app.list[index].expirationDay = day
})
})
// return new Promise((resolve, reject) => {
// OrderApi.list({ dataType: app.getTabValue(), page: pageNo }, { load: false })
// .then(result => {
// // 合并新数据
// const newList = app.initList(result.data.list)
// app.list.data = getMoreListData(newList, app.list, pageNo)
// resolve(newList)
// })
// })
},
// 初始化订单列表数据
initList(newList) {
newList.data.forEach(item => {
item.totalNum = 0
item.goods.forEach(goods => {
item.totalNum += goods.totalNum
})
})
return newList
},
// 获取当前标签项的值
getTabValue() {
return this.tabs[this.curTab].value
},
// 切换标签项
onChangeTab(index) {
const app = this
// 设置当前选中的标签
app.curTab = index
// 刷新订单列表
app.onRefreshList()
},
// 刷新订单列表
onRefreshList() {
this.list = getEmptyPaginateObj()
setTimeout(() => {
this.mescroll.resetUpScroll()
}, 120)
},
// 取消订单
onCancel(orderId) {
const app = this
uni.showModal({
title: '友情提示',
content: '确认要取消该订单吗?',
success(o) {
if (o.confirm) {
removeOrder(orderId)
.then(result => {
// 显示成功信息
app.$toast(result.message)
// 刷新订单列表
app.onRefreshList()
})
}
}
});
},
// 确认收货
onReceipt(orderId) {
const app = this
uni.showModal({
title: '友情提示',
content: '确认收到商品了吗?',
success(o) {
if (o.confirm) {
// OrderApi.receipt(orderId)
// .then(result => {
// // 显示成功信息
// app.$success(result.message)
// // 刷新订单列表
// app.onRefreshList()
// })
app.$navTo('pages/order/delivery', {
orderId
})
}
}
});
},
// 上传图片
chooseImage(orderId) {
const app = this
this.$navTo('pages/order/delivery', {
orderId
})
return;
// 选择图片
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success(chooseImageRes) {
const tempFilePaths = chooseImageRes.tempFilePaths;
uploadFile({
filePath: tempFilePaths[0],
fileType: 'image',
name: 'file'
}).then(res => {
console.log("res: ", res);
const orderSourceData = JSON.stringify({
orderId,
photo: fileUrl + res.data.path
})
receiptOrder({
orderId,
orderSourceData
}).then(result => {
app.$success(result.message)
// 刷新订单列表
app.onRefreshList()
})
})
// uni.uploadFile({
// url: 'http://127.0.0.1:9090/api/open/file/upload', //仅为示例,非真实的接口地址
// filePath: tempFiles,
// name: 'file',
// formData: {
// 'authorization': 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ7XCJ1c2VybmFtZVwiOlwiMjA4ODIwMjk1OTA0NDIwNVwiLFwidGVuYW50SWRcIjo2fSIsImV4cCI6MTY3ODUwNDc1NSwiaWF0IjoxNjc4NDE4MzU1fQ.M-8RB724jmHmhMKut-AFW9i79vJVNdBDqoq-EInDses'
// },
// success: (uploadFileRes) => {
// console.log(uploadFileRes.data);
// }
// });
// tempFiles = [{path:'xxx', size:100}]
// app.imageList = oldImageList.concat(tempFiles)
}
});
},
// 绑定设备页面
onBind(item) {
const app = this
const {
equipment
} = item
app.showQRCodeBind = true
app.equipment = item
// app.bindValue = equipment.equipmentCode
},
// 执行绑定
doBind() {
const app = this
const {
equipment,
bindValue
} = this
EquipmentApi.bindEquipment({
equipmentCode: bindValue,
orderId: equipment.orderId
}).then(result => {
app.$success(result.message)
app.showQRCodeBind = false
// 刷新订单列表
app.onRefreshList()
}).catch(err => {
app.$error(err.message)
})
},
// 获取核销二维码
onExtractQRCode(orderId) {
const app = this
OrderApi.extractQrcode(orderId, {
channel: app.platform
})
.then(result => {
app.qrcodeImage = result.data.qrcode
app.showQRCodePopup = true
})
},
handleRentingOut(order) {
const app = this
uni.showModal({
title: '提示',
content: "是否确认退租如有逾期退租将收取10元/天逾期费用)",
success: (result) => {
if (result.confirm) {
EquipmentApi.rentingOut({
orderId: order.orderId,
isRefund: 1
}).then(res => {
this.$success(res.message)
setTimeout(() => {
// 刷新当前订单数据
app.onRefreshList()
}, 1000)
}).catch(err => {
this.$success(err.message)
})
}
}
})
},
handleRentingOutCancel(order) {
const app = this
uni.showModal({
title: '提示',
content: "是否取消退租",
success: (result) => {
if (result.confirm) {
EquipmentApi.rentingOut({
orderId: order.orderId,
isRefund: 2
}).then(res => {
this.$success(res.message)
setTimeout(() => {
// 刷新当前订单数据
app.onRefreshList()
}, 1000)
}).catch(err => {
this.$success(err.message)
})
}
}
})
},
// 点击去支付
onPay(orderId) {
const app = this
getOrderPayByOrderId(orderId).then(res => {
if(res.data.isRenew == 0 && res.data.hasFreeze == 0){
if (res.data.equipmentCategory != 10 && res.data.orderStr) {
my.tradePay({
orderStr: res.data.orderStr, // 完整的支付参数拼接成的字符串,从服务端获取
success: (res) => {
},
fail: (res) => {
},
complete: () => {
checkFreeze(orderId).then((r) => {
if(r.code == 0){
// app.$success("押金校验成功!")
setTimeout(() => {
// uni.redirectTo({
// url: '/pages/order/index'
// })
this.$navTo('pages/checkout/cashier/index', {
orderId: r.data.id
})
}, 500)
}
else {
app.$error(r.message)
app.onRefreshList()
}
})
}
});
} else {
checkFreeze(orderId).then((r) => {
if(r.code == 0){
app.$success("押金校验成功")
setTimeout(() => {
// uni.redirectTo({
// url: '/pages/order/index'
// })
// app.onRefreshList()
this.$navTo('pages/checkout/cashier/index', {
orderId: r.data.id
})
}, 500)
}
else {
app.$error(r.message)
app.onRefreshList()
}
})
}
} else {
this.$navTo('pages/checkout/cashier/index', {
orderId: res.data.id
})
}
})
},
// 跳转到订单详情页
handleTargetDetail(orderId) {
this.$navTo('pages/order/detail', {
orderId
})
},
// 跳转到订单评价页
handleTargetComment(orderId) {
this.$navTo('pages/order/comment/index', {
orderId
})
},
handleChangeEquipment(orderId, equipmentId) {
const app = this
app.orderId = orderId
app.equipmentId = equipmentId
app.showQRCodeBindChange = true
},
// 续费
handleHireEquipment(orderId) {
getOrderPayByOrderId(orderId).then(res => {
this.$navTo('pages/checkout/cashier/index', {
orderId: res.data.id
})
})
},
// 换电
doEquipment(canReset = false) {
const app = this
const {
orderId,
bindValue,
equipmentId
} = this
EquipmentApi.changeEquipment({
equipmentCode: bindValue,
orderId,
equipmentId
}).then(result => {
app.$success(result.message)
app.showQRCodeBindChange = false
app.bindValue = ''
// 刷新订单列表
app.onRefreshList()
}).catch(err => {
app.$error(err.message)
})
console.log("this.bindValue: ", this.bindValue);
}
},
}
</script>
<style lang="scss" scoped>
// 项目内容
.order-item {
margin: 20rpx auto 20rpx auto;
padding: 30rpx 30rpx;
width: 94%;
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
border-radius: 16rpx;
background: #fff;
}
// 项目顶部
.item-top {
display: flex;
justify-content: space-between;
font-size: 26rpx;
margin-bottom: 40rpx;
.order-time {
color: #333333;
font-weight: bold;
}
.state-text {
color: $main-bg;
}
}
// 商品列表
.goods-list {
// 商品项
.goods-item {
display: flex;
margin-bottom: 10rpx;
// 商品图片
.goods-image {
width: 100rpx;
// height: 200rpx;
.image {
display: block;
width: 100rpx;
height: 100rpx;
border-radius: 8rpx;
}
}
// 商品内容
.goods-content {
flex: 1;
padding-left: 16rpx;
padding-top: 16rpx;
.goods-title {
width: 420rpx;
font-size: 26rpx;
// max-height: 76rpx;
line-height: 36rpx;
}
.goods-props {
margin-top: 14rpx;
height: 40rpx;
color: #ababab;
font-size: 24rpx;
overflow: hidden;
.goods-props-item {
display: inline-block;
margin-right: 14rpx;
padding: 4rpx 16rpx;
border-radius: 12rpx;
background-color: #F5F5F5;
width: auto;
}
}
}
// 交易信息
.goods-trade {
padding-top: 16rpx;
width: 200rpx !important;
text-align: right;
color: $uni-text-color-grey;
font-size: 26rpx;
.goods-price {
vertical-align: bottom;
margin-bottom: 16rpx;
.unit {
margin-right: -2rpx;
font-size: 24rpx;
}
}
}
}
}
// 订单合计
.order-total {
font-size: 26rpx;
vertical-align: bottom;
text-align: right;
// height: 80rpx;
// padding-top: 60rpx;
// margin-bottom: 30rpx;
.unit {
margin-left: 8rpx;
margin-right: -2rpx;
font-size: 26rpx;
}
.money {
font-size: 28rpx;
color: #ff0000;
}
}
// 订单操作
.order-handle {
.btn-group {
.btn-item {
border-radius: 10rpx;
padding: 8rpx 10rpx;
margin-left: 15rpx;
font-size: 26rpx;
float: right;
color: #383838;
border: 1rpx solid #a8a8a8;
&:last-child {
margin-left: 0;
}
&.active {
color: $main-bg;
border: 1rpx solid $main-bg;
}
}
}
}
// 弹出层 - 核销二维码
.qrcode-popup {
padding: 36rpx 30rpx;
.title {
font-size: 30rpx;
margin-bottom: 26rpx;
font-weight: bold;
text-align: center;
}
.pop-content {
min-height: 260rpx;
padding: 0 10rpx;
.image {
display: block;
width: 510rpx;
height: 510rpx;
}
}
}
// 弹出层 - 绑定设备码
.qrcode-bind {
width: 550rpx;
height: 300rpx;
padding: 36rpx 30rpx;
.title {
font-size: 30rpx;
margin-bottom: 26rpx;
font-weight: bold;
text-align: center;
}
.bind-content {
padding: 0 10rpx;
border: 1rpx solid #eee;
font-size: 24rpx;
.image {
display: block;
width: 510rpx;
height: 510rpx;
}
}
.submit {
margin-top: 30rpx;
}
}
.yuqi-text {
color: #ff0000;
}
</style>