<template>
|
<view class="container">
|
<!-- 固定顶部搜索栏 -->
|
<view class="fixed-search-container">
|
<!-- 生产车间下拉框和搜索框并列 -->
|
<view class="top-bar-container">
|
<!-- 生产车间下拉框 -->
|
<view class="workshop-selector-wrapper">
|
<view class="form-group-row">
|
<text class="form-label inline-label font-bold">生产车间</text>
|
<view class="workshop-selector flex-1">
|
<picker mode="selector" :range="workshopList" @change="handleWorkshopChange"
|
v-model="workshopIndex">
|
<view class="picker">
|
{{ workshopIndex >= 0 ? workshopList[workshopIndex] : '请选择车间' }}
|
</view>
|
</picker>
|
</view>
|
</view>
|
</view>
|
|
<!-- 搜索框 -->
|
<view class="search-bar-wrapper">
|
<view class="search-bar-box">
|
<picker mode="selector" :range="searchOptions" v-model="selectedOption"
|
@change="onPickerChange">
|
<view class="picker">{{ searchOptions[selectedOption] }}</view>
|
</picker>
|
<input class="search-text" type="text" v-model="searchValue" @keypress.enter="searchData"
|
placeholder="请输入搜索值" style="height: 40px;" />
|
<button class="search-btn" @click="searchData">搜索</button>
|
</view>
|
</view>
|
</view>
|
|
<!-- 固定分段控件 -->
|
<view class="fixed-newsTab">
|
<uni-segmented-control :current="current" :values="items" @clickItem="switchTab" style-type="button"
|
active-color="#165DFF"></uni-segmented-control>
|
</view>
|
</view>
|
|
<!-- 内容区域 -->
|
<view class="content-wrapper">
|
<view class="content">
|
<!-- 列表内容 - 统一渲染逻辑 -->
|
<view v-if="data.length > 0" class="result-list">
|
<uni-list>
|
<uni-list-item style="margin-top: 10px; border-radius: 8px;" class="list-item"
|
direction="column" v-for="item in data" :key="item.id" :to="getNavigateUrl(item)">
|
<template v-slot:header>
|
<view class="header-row">
|
<!-- 检验单号 - 自适应显示 -->
|
<view class="form-item header-item item-flex-2">
|
<label class="form-label font-bold">检验单号</label>
|
<span class="value-text billNo-bg">{{ item.releaseNo || '暂无数据' }}</span>
|
</view>
|
<!-- 车间 - 自适应显示 -->
|
<view class="form-item header-item item-flex-1">
|
<label class="form-label font-bold">车间</label>
|
<span class="value-text">{{ item.itemCj || '暂无数据' }}</span>
|
</view>
|
<!-- 审核标识 - 自适应显示 -->
|
<view class="form-item header-item item-flex-1">
|
<label class="form-label font-bold">审核标识</label>
|
<span class="value-text audit-status">
|
<checkbox value="FSUBMIT" disabled="true" :checked="item.fsubmit === 1"
|
class="audit-checkbox" />
|
</span>
|
</view>
|
</view>
|
</template>
|
|
<template v-slot:body>
|
<view style="margin-top: 0; padding: 0 15px;">
|
<view class="uni-content">
|
<!-- 直接使用内联模板 -->
|
<view class="uni-title-sub uni-ellipsis-2 font-bold">
|
<view class="form-group">
|
<label class="form-label lab font-bold">创建时间:</label>
|
<input class="form-input" disabled="true" type="text"
|
:value="item.createDate" />
|
</view>
|
</view>
|
<view class="uni-title-sub uni-ellipsis-2 font-bold">
|
<view class="form-group">
|
<label class="form-label lab font-bold">工单单号:</label>
|
<input class="form-input" disabled="true" type="text"
|
:value="item.billNo" />
|
</view>
|
</view>
|
<view class="uni-title-sub uni-ellipsis-2 font-bold">
|
<view class="form-group">
|
<label class="form-label lab font-bold">产线:</label>
|
<input class="form-input" disabled="true" type="text"
|
:value="item.lineNo" />
|
</view>
|
</view>
|
<view class="uni-title-sub uni-ellipsis-2 font-bold">
|
<view class="form-group">
|
<label class="form-label lab font-bold">物料编码:</label>
|
<input class="form-input" disabled="true" type="text"
|
:value="item.itemNo" />
|
</view>
|
</view>
|
<view class="uni-title-sub uni-ellipsis-2 font-bold">
|
<view class="form-group">
|
<label class="form-label font-bold">产品名称:</label>
|
<input class="form-input" disabled="true" type="text"
|
:value="item.itemName" />
|
</view>
|
</view>
|
<view class="uni-title-sub uni-ellipsis-2 font-bold">
|
<view class="form-group">
|
<label class="form-label font-bold">规格型号:</label>
|
<input class="form-input" disabled="true" type="text"
|
:value="item.itemModel" />
|
</view>
|
</view>
|
<view class="uni-title-sub uni-ellipsis-2 font-bold">
|
<view class="form-group">
|
<label class="form-label font-bold">工单数量:</label>
|
<input class="form-input" disabled="true" type="text"
|
:value="item.quantity" />
|
</view>
|
</view>
|
<view class="uni-note" style="color: #4B5563;">
|
<view class="form-group">
|
<label class="form-label lab font-bold">创建人:</label>
|
<input class="form-input" disabled="true" type="text"
|
:value="item.createBy" />
|
</view>
|
</view>
|
<view class="uni-note" style="color: #4B5563;">
|
<view class="form-group">
|
<label class="form-label lab font-bold">检验人:</label>
|
<input class="form-input" disabled="true" type="text"
|
:value="item.fcheckBy || item.createBy" />
|
</view>
|
</view>
|
<view class="uni-note" style="color: #4B5563;">
|
<view class="form-group">
|
<label class="form-label lab font-bold">检测结果:</label>
|
<input class="form-input" disabled="true" type="text"
|
:value="item.fcheckResu" />
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
</uni-list-item>
|
</uni-list>
|
</view>
|
|
<!-- 无数据提示 -->
|
<view v-else class="no-data-tip">暂无相关数据</view>
|
|
<!-- 添加按钮 -->
|
<view class="plus-button" @click="handleFabClick">+</view>
|
</view>
|
</view>
|
|
<!-- 刷新提示弹窗 -->
|
<view class="toast-mask" v-if="toastVisible">
|
<view class="toast-container">
|
<view class="toast-icon">
|
<image src="https://picsum.photos/id/237/40/40" mode="aspectFit"></image>
|
</view>
|
<view class="toast-message">
|
<text class="toast-title font-bold">刷新成功</text>
|
<text class="toast-content">数据已更新到最新状态</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
components: {}, // 移除组件导入
|
data() {
|
return {
|
items: ['未提交', '已提交'],
|
current: 0,
|
data: [],
|
pageIndex: 1,
|
limit: 20,
|
totalPage: 0,
|
totalCount: 0,
|
noData: false,
|
isLoading: false,
|
searchOptions: ['工单单号', '产品编码', '产品名称', '规格', '送检人', '检验单号'],
|
selectedOption: 0,
|
searchValue: '',
|
workshopList: [],
|
workshopIndex: -1,
|
fixedSearchHeight: 0,
|
toastVisible: false,
|
toastTimer: null,
|
loadingTimer: null
|
};
|
},
|
onLoad() {
|
this.initData();
|
this.loadWorkshops();
|
this.$nextTick(() => {
|
uni.createSelectorQuery().select('.fixed-search-container').boundingClientRect(rect => {
|
if (rect) {
|
this.fixedSearchHeight = rect.height;
|
console.log('固定搜索区域高度:', this.fixedSearchHeight);
|
}
|
}).exec();
|
});
|
},
|
methods: {
|
// 初始化数据
|
initData() {
|
this.data = [];
|
this.pageIndex = 1;
|
this.noData = false;
|
this.loadData();
|
},
|
|
// 加载车间数据
|
loadWorkshops() {
|
this.$post({
|
url: "/SJ/getWorkshop"
|
})
|
.then(res => {
|
console.log('车间列表响应:', res);
|
this.workshopList = res.data?.tbBillList?.map(item => item.departmentname) || [];
|
console.log('车间列表:', this.workshopList);
|
})
|
.catch(err => {
|
console.error("获取车间列表失败:", err);
|
uni.showToast({
|
title: "获取车间列表失败",
|
icon: 'none'
|
});
|
});
|
},
|
|
// 处理车间选择
|
handleWorkshopChange(e) {
|
this.workshopIndex = e.detail.value;
|
console.log('选择的车间索引:', this.workshopIndex);
|
|
const workshop = this.workshopList[this.workshopIndex];
|
if (workshop) {
|
uni.showToast({
|
title: `选择的车间: ${workshop}`,
|
icon: 'none',
|
duration: 2000
|
});
|
this.initData(); // 重新加载数据
|
}
|
},
|
|
// 搜索选项变更
|
onPickerChange(e) {
|
this.selectedOption = e.detail.value;
|
},
|
|
// 执行搜索
|
searchData() {
|
this.pageIndex = 1;
|
this.loadData();
|
},
|
|
// 加载数据
|
loadData() {
|
if (this.isLoading) return;
|
this.isLoading = true;
|
|
const userName = this.$loginInfo?.account || '';
|
const result = this.current === 1 ? "已完成" : "未完成";
|
const searchValue = this.searchValue.trim();
|
|
// 确定请求URL
|
const url = searchValue ? '/RKJ/getSearchPage' : '/RKJ/getPage';
|
|
// 构造请求参数
|
const requestData = {
|
pageIndex: this.pageIndex,
|
limit: this.limit,
|
createUser: userName,
|
result: result
|
};
|
|
// 根据搜索选项添加搜索条件
|
switch (this.selectedOption) {
|
case 0:
|
requestData.ItemCode = searchValue;
|
break; // 工单号
|
case 1:
|
requestData.ItemNo = searchValue;
|
break; // 产品编码
|
case 2:
|
requestData.ItemName = searchValue;
|
break; // 产品名称
|
case 3:
|
requestData.ItemModel = searchValue;
|
break; // 规格
|
case 4:
|
requestData.SongJ = searchValue;
|
break; // 送检人
|
case 5:
|
requestData.SongNo = searchValue;
|
break; // 检验单号
|
}
|
|
// 添加车间筛选条件
|
if (this.workshopIndex >= 0 && this.workshopList.length > 0) {
|
requestData.itemCj = this.workshopList[this.workshopIndex];
|
}
|
|
console.log('发送请求参数:', requestData);
|
|
// 发送请求
|
this.$post({
|
url,
|
data: requestData
|
})
|
.then(res => {
|
console.log('请求成功响应:', res);
|
if (res.data && res.data.tbBillList) {
|
if (this.pageIndex === 1) {
|
this.data = res.data.tbBillList;
|
} else {
|
this.data = [...this.data, ...res.data.tbBillList];
|
}
|
this.totalCount = res.data.totalCount;
|
this.totalPage = Math.ceil(this.totalCount / this.limit);
|
this.noData = this.pageIndex >= this.totalPage;
|
} else {
|
this.noData = true;
|
}
|
})
|
.catch(err => {
|
console.error('请求失败:', err);
|
uni.showToast({
|
title: "数据加载失败",
|
icon: 'none'
|
});
|
})
|
.finally(() => {
|
this.isLoading = false;
|
});
|
},
|
|
// 处理添加按钮点击
|
handleFabClick() {
|
uni.navigateTo({
|
url: '/pages/RKJ/Add'
|
});
|
},
|
|
// 切换标签页
|
switchTab(index) {
|
if (this.current !== index.currentIndex) {
|
this.current = index.currentIndex;
|
this.initData(); // 切换标签后重新加载数据
|
}
|
},
|
|
// 获取导航URL
|
getNavigateUrl(item) {
|
if (this.current === 0) {
|
return `Add?id=${item.id}&releaseNo=${item.releaseNo}`;
|
} else {
|
return `Add?id=${item.id}&billNo=${item.billNo}`;
|
}
|
},
|
|
// 显示刷新提示弹窗
|
showToast() {
|
this.toastVisible = true;
|
|
// 清除之前的定时器
|
if (this.toastTimer) {
|
clearTimeout(this.toastTimer);
|
}
|
|
// 设置定时器自动关闭弹窗
|
this.toastTimer = setTimeout(() => {
|
this.toastVisible = false;
|
}, 1300);
|
}
|
},
|
|
// 下拉刷新
|
onPullDownRefresh() {
|
this.pageIndex = 1;
|
this.loadData();
|
|
// 显示弹窗提示
|
this.showToast();
|
|
uni.stopPullDownRefresh();
|
},
|
|
// 上拉加载
|
onReachBottom() {
|
if (this.noData || this.isLoading) return;
|
this.pageIndex++;
|
this.loadData();
|
},
|
|
// 页面卸载时清除定时器
|
onUnload() {
|
if (this.toastTimer) {
|
clearTimeout(this.toastTimer);
|
}
|
if (this.loadingTimer) {
|
clearTimeout(this.loadingTimer);
|
}
|
}
|
};
|
</script>
|
<style lang="scss">
|
/* 颜色变量定义 */
|
$primary: #165DFF;
|
$primary-light: #E8F3FF;
|
$success: #36D399;
|
$warning: #FBBD23;
|
$error: #F87272;
|
$bg-light: #F9FAFB;
|
$bg-card: #FFFFFF;
|
$border: #E5E7EB;
|
$text-primary: #1F2937;
|
$text-secondary: #4B5563;
|
$text-muted: #9CA3AF;
|
$shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
$shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
$shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
/* 新增微蓝色调 */
|
$blue-50: #F0F7FF;
|
$blue-100: #E0EEFF;
|
|
/* 新增字体加粗类 */
|
.font-bold {
|
font-weight: 600;
|
}
|
|
/* 列表项样式 - 添加微蓝色背景 */
|
.list-item {
|
margin: 10px 15px;
|
border-radius: 8px;
|
overflow: hidden;
|
background-color: $blue-50;
|
/* 添加微蓝色背景 */
|
box-shadow: $shadow-sm;
|
transition: all 0.2s;
|
cursor: pointer;
|
|
&:hover {
|
transform: translateY(-2px);
|
box-shadow: $shadow-md;
|
background-color: $blue-100;
|
/* 悬停时加深蓝色调 */
|
}
|
}
|
|
/* 列表头部样式 - 与列表项背景协调 */
|
.header-row {
|
display: flex;
|
flex-wrap: nowrap;
|
/* 保持单行显示，不换行 */
|
gap: 10px;
|
padding: 15px;
|
background-color: $blue-100;
|
/* 头部使用稍深的蓝色调 */
|
border-radius: 8px 8px 0 0;
|
margin-bottom: 10px;
|
|
/* 确保子元素有最小宽度，防止内容溢出 */
|
.header-item {
|
min-width: 120px;
|
/* 缩小最小宽度，确保在小屏幕上也能一行显示 */
|
flex-grow: 1;
|
}
|
|
/* 平板和桌面视图 */
|
@media (min-width: 768px) {
|
.item-flex-1 {
|
flex: 1;
|
/* 第一个和第三个元素各占1份空间 */
|
}
|
|
.item-flex-2 {
|
flex: 2;
|
/* 第二个元素占2份空间 */
|
}
|
}
|
|
/* 移动视图 - 仍然保持在一行 */
|
@media (max-width: 767px) {
|
.item-flex-1 {
|
flex: 1;
|
/* 第一个和第三个元素各占1份空间 */
|
}
|
|
.item-flex-2 {
|
flex: 2;
|
/* 第二个元素占2份空间 */
|
}
|
|
/* 进一步缩小标签和值的字体大小 */
|
.form-label {
|
font-size: 12px;
|
min-width: 50px;
|
}
|
|
.value-text {
|
font-size: 12px;
|
}
|
}
|
}
|
|
/* 表单项目样式 - 与整体背景协调 */
|
.form-item {
|
display: flex;
|
align-items: center;
|
gap: 5px;
|
/* 减小间距，节省空间 */
|
background-color: rgba(255, 255, 255, 0.8);
|
/* 半透明白色背景 */
|
border-radius: 6px;
|
padding: 0 8px;
|
/* 减小内边距，节省空间 */
|
height: 40px;
|
/* 减小高度，节省空间 */
|
border: 1px solid $border;
|
box-sizing: border-box;
|
box-shadow: $shadow-sm;
|
transition: all 0.2s;
|
|
&:hover {
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
|
}
|
|
/* 标签和值的布局优化 */
|
.form-label {
|
min-width: 60px;
|
/* 标签最小宽度 */
|
white-space: nowrap;
|
font-size: 13px;
|
/* 减小字体大小 */
|
}
|
|
.value-text {
|
flex: 1;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
font-size: 13px;
|
/* 减小字体大小 */
|
}
|
}
|
|
/* 整体容器 */
|
.container {
|
padding: 0;
|
background-color: #F3F4F6;
|
}
|
|
/* 固定顶部搜索容器 */
|
.fixed-search-container {
|
position: fixed;
|
top: 0;
|
left: 0;
|
width: 100%;
|
z-index: 100;
|
background-color: $bg-card;
|
box-shadow: $shadow-md;
|
}
|
|
/* 顶部搜索栏容器 */
|
.top-bar-container {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 15px;
|
padding: 20px;
|
background-color: $bg-card;
|
}
|
|
/* 生产车间下拉框容器 */
|
.workshop-selector-wrapper {
|
flex: 1;
|
min-width: 200px;
|
}
|
|
/* 行内布局的表单组 */
|
.form-group-row {
|
display: flex;
|
align-items: center;
|
}
|
|
/* 行内标签 - 基础样式 */
|
.form-label {
|
color: $text-primary;
|
font-weight: 500;
|
margin: 0;
|
white-space: nowrap;
|
}
|
|
/* 下拉框容器 - 占满剩余空间 */
|
.flex-1 {
|
flex: 1;
|
}
|
|
/* 搜索框容器 */
|
.search-bar-wrapper {
|
flex: 2;
|
min-width: 200px;
|
}
|
|
.search-bar-box {
|
display: flex;
|
width: 100%;
|
height: 44px;
|
border: 1px solid $border;
|
border-radius: 8px;
|
overflow: hidden;
|
background-color: $bg-light;
|
transition: all 0.2s;
|
|
&:hover {
|
border-color: $primary;
|
}
|
}
|
|
.picker {
|
width: 120px;
|
height: 44px;
|
line-height: 44px;
|
text-align: center;
|
font-size: 14px;
|
color: $text-secondary;
|
border-right: 1px solid $border;
|
background-color: $bg-light;
|
cursor: pointer;
|
}
|
|
.search-text {
|
flex: 1;
|
height: 44px;
|
line-height: 44px;
|
padding: 0 15px;
|
font-size: 14px;
|
border: none;
|
outline: none;
|
background-color: $bg-light;
|
color: $text-primary;
|
|
&::placeholder {
|
color: $text-muted;
|
}
|
}
|
|
.search-btn {
|
background-color: $primary;
|
color: white;
|
font-size: 14px;
|
width: 80px;
|
height: 44px;
|
line-height: 44px;
|
border-radius: 0;
|
padding: 0;
|
margin: 0;
|
border: none;
|
transition: all 0.2s;
|
cursor: pointer;
|
|
&:hover {
|
background-color: #0E52EA;
|
box-shadow: 0 2px 4px rgba(22, 93, 255, 0.3);
|
}
|
|
&:active {
|
transform: scale(0.98);
|
}
|
}
|
|
/* 分段控件 */
|
.fixed-newsTab {
|
background-color: $bg-card;
|
padding: 10px 0;
|
border-bottom: 1px solid $border;
|
}
|
|
/* 内容区域 - 增加顶部边距，避免被固定元素遮挡 */
|
.content-wrapper {
|
padding-top: calc(var(--window-top) + 120px);
|
}
|
|
/* 值文本样式 */
|
.value-text {
|
flex: 1;
|
text-align: left;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
color: $text-primary;
|
font-size: 14px;
|
}
|
|
/* 检验单号特殊背景样式 */
|
.billNo-bg {
|
background: linear-gradient(135deg, $primary-light 0%, #D1E8FF 100%);
|
color: $primary;
|
border-radius: 6px;
|
padding: 0 8px;
|
/* 减小内边距 */
|
font-weight: 500;
|
border: 1px solid #B5D8FF;
|
box-shadow: 0 1px 2px rgba(22, 93, 255, 0.1);
|
font-size: 13px;
|
/* 减小字体大小 */
|
}
|
|
/* 审核状态样式 */
|
.audit-status {
|
display: flex;
|
align-items: center;
|
gap: 5px;
|
/* 减小间距 */
|
}
|
|
.audit-checkbox {
|
transform: scale(0.85);
|
/* 缩小复选框 */
|
accent-color: $success;
|
cursor: pointer;
|
}
|
|
.audit-text {
|
color: $text-secondary;
|
font-size: 13px;
|
/* 减小字体大小 */
|
}
|
|
.audit-text:checked+.audit-text {
|
color: $success;
|
font-weight: 500;
|
}
|
|
/* 加号按钮 */
|
.plus-button {
|
position: fixed;
|
bottom: 25px;
|
right: 25px;
|
width: 64px;
|
height: 64px;
|
border-radius: 50%;
|
background-color: $primary;
|
color: white;
|
text-align: center;
|
line-height: 62px;
|
font-size: 28px;
|
cursor: pointer;
|
z-index: 1000;
|
box-shadow: 0 4px 12px rgba(22, 93, 255, 0.3);
|
transition: all 0.2s;
|
|
&:hover {
|
transform: scale(1.05);
|
box-shadow: 0 6px 16px rgba(22, 93, 255, 0.4);
|
}
|
|
&:active {
|
transform: scale(0.95);
|
}
|
}
|
|
/* 输入框样式 */
|
.form-input {
|
background-color: rgba(255, 255, 255, 0.8);
|
/* 半透明白色背景 */
|
border: 1px solid $border;
|
border-radius: 6px;
|
padding: 0 12px;
|
height: 36px;
|
line-height: 36px;
|
color: $text-primary;
|
font-size: 14px;
|
transition: all 0.2s;
|
|
&:focus {
|
border-color: $primary;
|
outline: none;
|
}
|
}
|
|
/* 标签样式 */
|
.lab {
|
width: 80px;
|
color: $text-secondary;
|
}
|
|
/* 统一圆角 */
|
* {
|
border-radius: 6px;
|
}
|
|
/* 平滑滚动 */
|
html {
|
scroll-behavior: smooth;
|
}
|
|
/* 弹窗提示样式 */
|
.toast-mask {
|
position: fixed;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
background-color: rgba(0, 0, 0, 0.3);
|
z-index: 2000;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
animation: fadeIn 0.3s ease-in-out;
|
}
|
|
.toast-container {
|
width: 280px;
|
background-color: $bg-card;
|
border-radius: 12px;
|
box-shadow: $shadow-lg;
|
padding: 24px;
|
text-align: center;
|
animation: zoomIn 0.3s ease-out;
|
}
|
|
.toast-icon {
|
width: 64px;
|
height: 64px;
|
margin: 0 auto 16px;
|
border-radius: 50%;
|
background-color: $success;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
box-shadow: 0 4px 12px rgba(54, 211, 153, 0.3);
|
}
|
|
.toast-icon image {
|
width: 32px;
|
height: 32px;
|
border-radius: 50%;
|
}
|
|
.toast-title {
|
font-size: 18px;
|
color: $text-primary;
|
margin-bottom: 8px;
|
}
|
|
.toast-content {
|
font-size: 14px;
|
color: $text-secondary;
|
}
|
|
/* 动画效果 */
|
@keyframes fadeIn {
|
from {
|
opacity: 0;
|
}
|
|
to {
|
opacity: 1;
|
}
|
}
|
|
@keyframes zoomIn {
|
from {
|
transform: scale(0.8);
|
opacity: 0;
|
}
|
|
to {
|
transform: scale(1);
|
opacity: 1;
|
}
|
}
|
</style>
|
