文件中心模块样式优化

pages/filecenter/filecenter.vue

@@ -15,37 +15,7 @@
     </view> -->
     <view v-if="!menushow" class="container">
       <view class="main">
-        <view class="fileArea" style="margin-top: 40px">
-          <view style="margin-top: 15px; margin-left: 10px" class="fileTitle"
-            >文件名称</view
-          >
-          <u-input
-            style="margin-top: 15px; border-color: #2a94ff"
-            v-model="fileName"
-            type="text"
-          ></u-input
-        ></view>
-        <view class="pickerArea">
-          <view class="btns">
-            <u-button
-              style="margin: 15px"
-              type="primary"
-              :text="fileType ? fileType : '选择文件类型'"
-              @click="pickershow = true"
-            ></u-button>
-            <u-button style="margin: 15px" type="primary" @click="searchFile"
-              >查询</u-button
-            >
-          </view>
-          <u-picker
-            :show="pickershow"
-            :columns="fileTypeList"
-            keyName="label"
-            @cancel="pickershow = false"
-            @confirm="selectFileType"
-          ></u-picker>
-        </view>
-        <view class="u-page">
+        <view style="margin-top: 40px">
           <u-subsection
             :list="sectionList"
             mode="button"
@@ -57,6 +27,46 @@
             active-color="#000"
             inactive-color="#000"
           ></u-subsection>
+        </view>
+        <view class="searchArea">
+          <view class="fileArea">
+            <view style="margin-top: 15px; margin-left: 10px" class="fileTitle"
+              >文件名称</view
+            >
+            <u-input
+              style="margin-top: 15px; margin-right: 15px"
+              v-model="fileName"
+              type="text"
+              class="fileInput"
+            ></u-input
+          ></view>
+          <view class="pickerArea">
+            <view class="btns">
+              <u-button
+                class="fileBtn"
+                style="margin: 15px"
+                type="primary"
+                :text="fileType ? fileType : '选择文件类型'"
+                @click="pickershow = true"
+              ></u-button>
+              <u-button
+                class="fileBtn"
+                style="margin: 15px"
+                type="primary"
+                @click="searchFile"
+                >查询</u-button
+              >
+            </view>
+            <u-picker
+              :show="pickershow"
+              :columns="fileTypeList"
+              keyName="label"
+              @cancel="pickershow = false"
+              @confirm="selectFileType"
+            ></u-picker>
+          </view>
+        </view>
+        <view class="u-page">
           <u-list>
             <u-list-item
               class="itemback"
@@ -72,13 +82,48 @@
                     <text class="text-style1">{{ item.fileName }}</text>
                   </view>
                 </view>
+                <view class="btnClass" style="margin-bottom: 30rpx">
+                  <u-button
+                    class="btn"
+                    type="primary"
+                    shape="circle"
+                    text="审批详情"
+                    @click="detailmodal(item)"
+                  ></u-button>
+                  <u-button
+                    class="btn"
+                    type="primary"
+                    shape="circle"
+                    text="提交"
+                    @click="commitmodal(item)"
+                  ></u-button>
+                  <u-button
+                    class="btn"
+                    type="primary"
+                    shape="circle"
+                    text="撤回"
+                    @click="retractmodal(item)"
+                  ></u-button>
+                  <u-button
+                    class="btn"
+                    type="primary"
+                    shape="circle"
+                    text="下载"
+                    @click="download(item)"
+                  ></u-button>
+                  <u-button
+                    class="btn"
+                    type="primary"
+                    shape="circle"
+                    text="删除"
+                    @click="showmodal(item)"
+                  ></u-button>
+                </view>
                 <view class="datacard laiyuan">
                   <view style="margin: 20rpx 20rpx">
                     <text class="text-style">{{ item.fileSource }}</text>
                   </view>
-                  <view style="margin: 20rpx 20rpx; font-size: small"
-                    >文件来源</view
-                  >
+                  <view class="text-info">文件来源</view>
                 </view>
                 <view class="datacard zhuangtai">
                   <view style="margin: 20rpx 20rpx">
@@ -86,64 +131,21 @@
                       item.bpmStatus_dictText
                     }}</text>
                   </view>
-                  <view style="margin: 20rpx 20rpx; font-size: small"
-                    >审批状态</view
-                  >
+                  <view class="text-info">审批状态</view>
                 </view>
                 <view class="datacard user">
                   <view style="margin: 20rpx 20rpx">
                     <text class="text-style">{{ item.createBy }}</text>
                   </view>
-                  <view style="margin: 20rpx 20rpx; font-size: small"
-                    >创建人</view
-                  >
+                  <view class="text-info">创建人</view>
                 </view>
                 <view class="datacard time">
                   <view style="margin: 20rpx 20rpx">
                     <text class="text-style">{{ item.createTime }}</text>
                   </view>
-                  <view style="margin: 20rpx 20rpx; font-size: small"
-                    >上传时间</view
-                  >
+                  <view class="text-info">上传时间</view>
                 </view>
               </view>
-              <view class="btnClass">
-                <u-button
-                  class="btn"
-                  type="primary"
-                  shape="circle"
-                  text="审批详情"
-                  @click="detailmodal(item)"
-                ></u-button>
-                <u-button
-                  class="btn"
-                  type="primary"
-                  shape="circle"
-                  text="提交"
-                  @click="commitmodal(item)"
-                ></u-button>
-                <u-button
-                  class="btn"
-                  type="primary"
-                  shape="circle"
-                  text="撤回"
-                  @click="retractmodal(item)"
-                ></u-button>
-                <u-button
-                  class="btn"
-                  type="primary"
-                  shape="circle"
-                  text="下载"
-                  @click="download(item)"
-                ></u-button>
-                <u-button
-                  class="btn"
-                  type="primary"
-                  shape="circle"
-                  text="删除"
-                  @click="showmodal(item)"
-                ></u-button>
-              </view>
             </u-list-item>
           </u-list>
           <!-- 审批详情 -->
@@ -250,8 +252,14 @@
               ></u--textarea>
             </view>
             <view class="button-container">
-              <u-button @click="cancelRetract" shape="circle">取消</u-button>
-              <u-button @click="confirmRetract" shape="circle" type="primary"
+              <u-button @click="cancelRetract" class="fileBtn" shape="circle"
+                >取消</u-button
+              >
+              <u-button
+                @click="confirmRetract"
+                class="fileBtn"
+                shape="circle"
+                type="primary"
                 >确认</u-button
               >
             </view>
@@ -650,6 +658,19 @@ export default {
 </script>
 
 <style scoped>
+.fileBtn {
+  background: linear-gradient(to right, #338afe, #07b4ff, #338afe);
+  border-radius: 5px;
+}
+.fileInput {
+  border: 1px solid #2a94ff !important;
+}
+.text-info {
+  margin: 20rpx 20rpx;
+  font-size: 14px;
+  font-weight: 500;
+  color: #657497;
+}
 .fileTitle {
   margin-right: 20px;
   line-height: 40px;
@@ -660,6 +681,12 @@ export default {
   flex-direction: row;
   justify-content: space-around;
 }
+.searchArea {
+  display: flex;
+  flex-direction: column;
+  background-color: #ffffff;
+  margin-bottom: 10rpx;
+}
 .btns {
   width: 100%;
   display: flex;
@@ -691,7 +718,7 @@ button {
 .itemback {
   padding: 20rpx;
   background-color: #ffffff;
-  margin-bottom: 5rpx;
+  margin-bottom: 10rpx;
   display: flex;
 }
 .btnClass {
@@ -700,6 +727,8 @@ button {
   margin-top: 20rpx;
 }
 .btn {
+  background: linear-gradient(to right, #338afe, #07b4ff, #338afe);
+  border-radius: 5px;
   border-radius: 10rpx;
   margin-right: 10rpx; /* 示例：添加一些右外边距，但确保它不会导致换行 */
 }
@@ -709,7 +738,8 @@ button {
 }
 .text-style {
   color: #3787fe;
-  font-weight: small;
+  font-size: 16px;
+  font-weight: bold;
 }
 .text-style1 {
   color: #000000;

pages/gasreport/components/gasImgIdentify.vue

@@ -291,7 +291,7 @@
 import api from "@/api/api";
 import moment from "moment";
 import configService from "@/common/service/config.service.js";
-import { RHFselcet } from "@/uni_modules/fz-media-selcet";
+// import { RHFselcet } from "@/uni_modules/fz-media-selcet";
 import helangCompress from "@/components/helang-compress/helang-compress";
 export default {
   name: "gasFill",

pages/history/history.vue

@@ -54,16 +54,7 @@
               type="primary"
               text="查询"
               @click="checkHistory"
-              style="
-                width: 100px;
-                background: linear-gradient(
-                  to right,
-                  rgb(53, 135, 254, 0.5),
-                  rgb(8, 179, 254, 0.5),
-                  rgb(53, 135, 254, 0.5)
-                );
-                border-radius: 5px;
-              "
+              class="btn"
             ></u-button>
           </div>
           <u-picker
@@ -617,6 +608,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.btn {
+  width: 80px;
+  background: linear-gradient(to right, #338afe, #07b4ff, #338afe) !important;
+  border-radius: 5px;
+}
 .u-button {
   border-radius: 5px;
   border: 1px solid #2299fe;

pages/operation/operation.vue

@@ -5,6 +5,7 @@
         <div class="flcard">
           <div class="btns">
             <uni-datetime-picker
+              class="u-button"
               :show="dataShow"
               mode="datetime"
               @cancel="dataShow = false"
@@ -12,18 +13,19 @@
               v-model="StartTime"
             ></uni-datetime-picker>
             <uni-datetime-picker
+              class="u-button"
               :show="dataShow1"
               mode="datetime"
               @cancel="dataShow1 = false"
               @confirm="selectEndTime"
               v-model="EndTime"
             ></uni-datetime-picker>
-            <u-icon
-              size="30"
-              color="#3c9cff"
-              name="search"
+            <u-button
+              type="primary"
+              text="查询"
               @click="checkHistoryData"
-            ></u-icon>
+              class="btn"
+            ></u-button>
           </div>
         </div>
         <u-list :class="{ emptyhistory: historyData.length === 0 }">
@@ -33,40 +35,31 @@
               v-for="(item, index) in historyData"
               :key="index"
             >
-              <view>
-                <view class="content flcard">
-                  <view class="datacard user">
-                    <view style="margin: 20rpx 20rpx">
-                      <text class="text-style">{{ item.realname }}</text>
-                    </view>
-                    <view style="margin: 20rpx 20rpx; font-size: small"
-                      >用户</view
-                    >
-                  </view>
-                  <view class="datacard device">
-                    <view style="margin: 20rpx 20rpx">
-                      <text class="text-style">{{ item.devicename }}</text>
-                    </view>
-                    <view style="margin: 20rpx 20rpx; font-size: small"
-                      >操作设备</view
-                    >
+              <view class="time">
+                <view style="margin: 20rpx 30rpx">
+                  <text style="font-weight: bold">{{ item.createTime }}</text>
+                </view>
+              </view>
+              <view class="content flcard">
+                <view class="datacard user">
+                  <view style="margin: 20rpx 20rpx">
+                    <text class="text-style">{{ item.realname }}</text>
                   </view>
-                  <view class="datacard record">
-                    <view style="margin: 20rpx 20rpx">
-                      <text class="text-style">{{ item.strremark }}</text>
-                    </view>
-                    <view style="margin: 20rpx 20rpx; font-size: small"
-                      >操作记录</view
-                    >
+                  <view class="text-info">用户</view>
+                </view>
+                <view class="split"></view>
+                <view class="datacard device">
+                  <view style="margin: 20rpx 20rpx">
+                    <text class="text-style">{{ item.devicename }}</text>
                   </view>
-                  <view class="datacard time">
-                    <view style="margin: 20rpx 20rpx">
-                      <text class="text-style">{{ item.createTime }}</text>
-                    </view>
-                    <view style="margin: 20rpx 20rpx; font-size: small"
-                      >操作时间</view
-                    >
+                  <view class="text-info">操作设备</view>
+                </view>
+                <view class="split"></view>
+                <view class="datacard record">
+                  <view style="margin: 20rpx 20rpx">
+                    <text class="text-style">{{ item.strremark }}</text>
                   </view>
+                  <view class="text-info">操作记录</view>
                 </view>
               </view>
             </u-list-item>
@@ -183,6 +176,34 @@ export default {
 </script>
 
 <style>
+.u-button {
+  border-radius: 5px;
+  border: 1px solid #2299fe;
+  font-weight: bold;
+}
+.btn {
+  width: 80px;
+  background: linear-gradient(to right, #338afe, #07b4ff, #338afe) !important;
+  border-radius: 5px;
+}
+.content {
+  margin-top: 20rpx;
+  background-image: url("/static/operation/operateData.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+}
+.split {
+  width: 2%;
+  height: 120rpx;
+  margin-right: 9%;
+  background-image: url("/static/operation/operateSplit.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
 .emptyhistory {
   background: url("/static/empty.png") no-repeat;
   background-size: 100% 50%;
@@ -225,66 +246,30 @@ export default {
 }
 .text-style {
   color: #3787fe;
+  font-size: 16px;
   font-weight: bold;
+  text-align: center;
+}
+.text-info {
+  margin: 20rpx 20rpx;
+  font-size: 14px;
+  font-weight: 500;
+  color: #657497;
 }
-
 .itemback {
   padding: 20rpx;
   background-color: #ffffff;
   margin-bottom: 5rpx;
 }
 .datacard {
-  width: 48%;
-  margin: 1%;
+  width: 45%;
   float: left;
   height: 120rpx;
   border-radius: 10px;
 }
 .time {
-  background: url(/static/operation/operationTime.png),
-    linear-gradient(
-      to right,
-      rgba(55, 135, 254, 0.08),
-      rgba(4, 184, 255, 0.08),
-      rgba(60, 161, 237, 0.08)
-    );
-  background-size: auto 100%;
-  background-position: right;
-  background-repeat: no-repeat;
-}
-.record {
-  background: url(/static/operation/operationRecord.png),
-    linear-gradient(
-      to right,
-      rgba(55, 135, 254, 0.08),
-      rgba(4, 184, 255, 0.08),
-      rgba(60, 161, 237, 0.08)
-    );
-  background-size: auto 100%;
-  background-position: right;
-  background-repeat: no-repeat;
-}
-.user {
-  background: url(/static/operation/user.png),
-    linear-gradient(
-      to right,
-      rgba(55, 135, 254, 0.08),
-      rgba(4, 184, 255, 0.08),
-      rgba(60, 161, 237, 0.08)
-    );
-  background-size: auto 100%;
-  background-position: right;
-  background-repeat: no-repeat;
-}
-.device {
-  background: url(/static/operation/operationDevice.png),
-    linear-gradient(
-      to right,
-      rgba(55, 135, 254, 0.08),
-      rgba(4, 184, 255, 0.08),
-      rgba(60, 161, 237, 0.08)
-    );
-  background-size: auto 100%;
+  background: url(/static/operation/timeBg.png);
+  background-size: 100% 100%;
   background-position: right;
   background-repeat: no-repeat;
 }