修改图片上传后样式

src/assets/styles/btn.scss

@@ -218,3 +218,61 @@
   font-size: 14px;
   border-radius: 4px;
 }
+.form-detail-button {
+  //padding: 7px 13px 7px 11px !important;
+  padding-left: 6px !important;
+  padding-right: 6px !important;
+  height: 32px;
+  background: #5BB647;
+  border-radius: 4px 4px 4px 4px;
+  border: 1px solid #5BB647;
+  opacity: 1;
+  font-size: 12px;
+  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+  font-weight: 400;
+  color: #FFFFFF;
+  i{
+    width: 8px;
+    height: 8px;
+    margin-right: 4px;
+  }
+  &:hover {
+    background: #83C374!important;
+    color: #FFFFFF!important;
+    border: 1px solid #83C374!important;
+  }
+  &:focus {
+    background: #55A343!important;
+    color: #FFFFFF!important;
+    border: 1px solid #55A343!important;
+  }
+}
+.form-edit-button {
+  //padding: 7px 13px 7px 11px !important;
+  padding-left: 6px !important;
+  padding-right: 6px !important;
+  height: 32px;
+  background: #3490ce;
+  border-radius: 4px 4px 4px 4px;
+  border: 1px solid #3490ce;
+  opacity: 1;
+  font-size: 12px;
+  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+  font-weight: 400;
+  color: #FFFFFF;
+  i{
+    width: 8px;
+    height: 8px;
+    margin-right: 4px;
+  }
+  &:hover {
+    background: #63a8d6;
+    color: #FFFFFF!important;
+    border: 1px solid #63a8d6;
+  }
+  &:focus {
+    background: #3490ce!important;
+    color: #FFFFFF;
+    border: 1px solid #3490ce!important;
+  }
+}

src/components/ImageUpload/index.vue

@@ -96,7 +96,6 @@ export default {
     value: {
       handler(val) {
         if (val) {
-          console.log('kkkkkkkkkkkkkkkkkk', this.baseUrl)
           // 首先将值转为数组
           const list = Array.isArray(val) ? val : this.value.split(',')
           // 然后将数组转为对象数组
@@ -138,13 +137,13 @@ export default {
       }
 
       if (!isImg) {
-        this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join('/')}图片格式文件!`)
+        this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join('/')}图片格式文件`)
         return false
       }
       if (this.fileSize) {
         const isLt = file.size / 1024 / 1024 < this.fileSize
         if (!isLt) {
-          this.$modal.msgError(`上传图片大小不能超过 ${this.fileSize} MB!`)
+          this.$modal.msgError(`上传图片大小不能超过 ${this.fileSize} MB`)
           return false
         }
       }
@@ -153,7 +152,7 @@ export default {
     },
     // 文件个数超出
     handleExceed() {
-      this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`)
+      this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个`)
     },
     // 上传成功回调
     handleUploadSuccess(res, file) {

src/views/banner_management/banner_add.vue

 <template>
   <div class="banner-container">
-    <div class="bannerHeaderTitle">
-      <span style="color: #666666; font-weight: 600; font-size: 16px;">新增</span>
+    <!--   头部标题-->
+    <div style="padding-top:32px;text-align: center;">
+      <span class="top-title-style">新增</span>
     </div>
     <div class="bannerAddMain">
-      <div style="display: flex;margin: 20px;">
-        <div style="height: 30px;border-left: 5px solid #5FB54B;" />
-        <div style="padding-top: 3px;padding-left: 10px;color: #666666; font-weight: 700; font-size: 16px;">轮播信息</div>
+      <div style="padding: 20px;">
+        <div style="display: flex">
+          <!--  轮播信息 -->
+          <div class="tip-green" />
+          <div class="title-font-style">
+            轮播信息
+          </div>
+        </div>
       </div>
       <div>
         <el-form ref="form" :model="form" label-width="133px" :rules="rules">
           <el-form-item label="标题：" prop="title">
-            <el-input v-model.trim="form.title" class="form-input" style="width: 420px" maxlength="12" show-word-limit clearable />
+            <el-input v-model.trim="form.title" class="form-input" style="width: 420px" maxlength="12" clearable />
           </el-form-item>
           <el-form-item label="轮播图：" prop="img">
             <image-upload v-model="form.img" :limit="1" :is-show-tip="false" file-size="20" />
           </el-form-item>
           <el-form-item label="跳转地址：" prop="url">
-            <el-input v-model.trim="form.url" class="form-input" style="width: 420px" maxlength="255" show-word-limit clearable />
+            <el-input v-model.trim="form.url" class="form-input" style="width: 420px" maxlength="255" clearable />
           </el-form-item>
           <el-form-item label="权重：" prop="sort">
             <el-input-number
@@ -47,7 +53,7 @@
             <span v-else style="height: 2.5rem;line-height: 2.5rem;color: #f5aa6c;margin-left: 5px;">未发布</span>
           </el-form-item>
           <el-form-item label="备注：" prop="notes">
-            <el-input v-model.trim="form.notes" class="form-input" style="width: 420px" maxlength="60" show-word-limit clearable />
+            <el-input v-model.trim="form.notes" type="textarea" rows="3" class="form-input" style="width: 420px" maxlength="60" clearable />
           </el-form-item>
           <el-form-item>
             <el-button :loading="submitLoading" class="queryBtn" icon="el-icon-check" @click="submitForm">提交</el-button>
@@ -166,7 +172,7 @@ export default {
             if (res.code === 200) {
               this.submitLoading = false
               this.$message({
-                message: '新增成功！',
+                message: '新增成功',
                 type: 'success'
               })
               this.goBack()
@@ -211,4 +217,28 @@ export default {
   line-height: 40px !important;
   font-size: 14px !important;
 }
+//最上方文字样式
+.top-title-style{
+  font-size: 24px;
+  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
+  font-weight: bold;
+  color: #333333;
+}
+//模块tip样式--绿色
+.tip-green {
+  margin-right: 13px;
+  width: 3px;
+  height: 24px;
+  background: #5FB54B;
+  border-radius: 10px 10px 10px 10px;
+  opacity: 1;
+}
+//小标题样式
+.title-font-style {
+  font-size: 16px;
+  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
+  font-weight: bold;
+  color: #333333;
+  line-height: 24px;
+}
 </style>

src/views/banner_management/banner_detail.vue

 <template>
   <div class="banner-container">
-    <div class="bannerHeaderTitle">
-      <span style="color: #666666; font-weight: 600; font-size: 16px;">详情</span>
+    <!--   头部标题-->
+    <div style="padding-top:32px;text-align: center;">
+      <span class="top-title-style">详情</span>
     </div>
     <div class="bannerAddMain">
-      <div style="display: flex;margin: 20px;">
-        <div style="height: 30px;border-left: 5px solid #5FB54B;" />
-        <div style="padding-top: 3px;padding-left: 10px;color: #666666; font-weight: 700; font-size: 16px;">轮播信息</div>
+      <div style="padding: 20px;">
+        <div style="display: flex">
+          <!--  轮播信息 -->
+          <div class="tip-green" />
+          <div class="title-font-style">
+            轮播信息
+          </div>
+        </div>
       </div>
       <div>
         <el-form ref="form" :model="form" label-width="133px">
@@ -47,7 +53,7 @@
             </span>
           </el-form-item>
           <el-form-item label="备注：" prop="notes">
-            <el-input v-model.trim="form.notes" disabled class="form-input" style="width: 420px" maxlength="60" show-word-limit clearable />
+            <el-input v-model.trim="form.notes" type="textarea" rows="3" show-word-limit disabled class="form-input" style="width: 420px" maxlength="60" clearable />
           </el-form-item>
           <el-form-item>
             <el-button class="resetBtn" icon="el-icon-back" @click="goBack">返回</el-button>
@@ -147,4 +153,28 @@ export default {
   height: 9.25rem;
   background-color: #00afff;
 }
+//最上方文字样式
+.top-title-style{
+  font-size: 24px;
+  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
+  font-weight: bold;
+  color: #333333;
+}
+//模块tip样式--绿色
+.tip-green {
+  margin-right: 13px;
+  width: 3px;
+  height: 24px;
+  background: #5FB54B;
+  border-radius: 10px 10px 10px 10px;
+  opacity: 1;
+}
+//小标题样式
+.title-font-style {
+  font-size: 16px;
+  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
+  font-weight: bold;
+  color: #333333;
+  line-height: 24px;
+}
 </style>

src/views/banner_management/banner_edit.vue

 <template>
   <div class="banner-container">
-    <div class="bannerHeaderTitle">
-      <span style="color: #666666; font-weight: 600; font-size: 16px;">编辑</span>
+    <!--   头部标题-->
+    <div style="padding-top:32px;text-align: center;">
+      <span class="top-title-style">编辑</span>
     </div>
     <div class="bannerAddMain">
-      <div style="display: flex;margin: 20px;">
-        <div style="height: 30px;border-left: 5px solid #5FB54B;" />
-        <div style="padding-top: 3px;padding-left: 10px;color: #666666; font-weight: 700; font-size: 16px;">轮播信息</div>
+      <div style="padding: 20px;">
+        <div style="display: flex">
+          <!--  轮播信息 -->
+          <div class="tip-green" />
+          <div class="title-font-style">
+            轮播信息
+          </div>
+        </div>
       </div>
       <div>
         <el-form ref="form" :model="form" label-width="133px" :rules="rules">
           <el-form-item label="标题：" prop="title">
-            <el-input v-model.trim="form.title" class="form-input" style="width: 420px" maxlength="12" show-word-limit clearable :disabled="form.id === 1" />
+            <el-input v-model.trim="form.title" class="form-input" style="width: 420px" maxlength="12" clearable :disabled="form.id === 1" />
           </el-form-item>
           <el-form-item label="轮播图：" prop="img">
             <image-upload v-model="form.img" :limit="1" :is-show-tip="false" file-size="20" />
           </el-form-item>
           <el-form-item label="跳转地址：" prop="url">
-            <el-input v-model.trim="form.url" class="form-input" style="width: 420px" maxlength="255" show-word-limit clearable :disabled="form.id === 1" />
+            <el-input v-model.trim="form.url" class="form-input" style="width: 420px" maxlength="255" clearable :disabled="form.id === 1" />
           </el-form-item>
           <el-form-item label="权重：" prop="sort">
             <el-input-number
@@ -49,7 +55,7 @@
             </span>
           </el-form-item>
           <el-form-item label="备注：" prop="notes">
-            <el-input v-model.trim="form.notes" :disabled="form.id === 1" class="form-input" style="width: 420px" maxlength="60" show-word-limit clearable />
+            <el-input v-model.trim="form.notes" type="textarea" rows="3" :disabled="form.id === 1" class="form-input" style="width: 420px" maxlength="60" clearable />
           </el-form-item>
           <el-form-item>
             <el-button :loading="submitLoading" class="queryBtn" icon="el-icon-check" @click="submitForm">提交</el-button>
@@ -193,7 +199,7 @@ export default {
               if (res.code === 200) {
                 this.submitLoading = false
                 this.$message({
-                  message: '修改成功！',
+                  message: '修改成功',
                   type: 'success'
                 })
                 this.goBack()
@@ -239,4 +245,28 @@ export default {
   line-height: 40px !important;
   font-size: 14px !important;
 }
+//最上方文字样式
+.top-title-style{
+  font-size: 24px;
+  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
+  font-weight: bold;
+  color: #333333;
+}
+//模块tip样式--绿色
+.tip-green {
+  margin-right: 13px;
+  width: 3px;
+  height: 24px;
+  background: #5FB54B;
+  border-radius: 10px 10px 10px 10px;
+  opacity: 1;
+}
+//小标题样式
+.title-font-style {
+  font-size: 16px;
+  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
+  font-weight: bold;
+  color: #333333;
+  line-height: 24px;
+}
 </style>

src/views/banner_management/banner_management.vue

 <template>
   <div style="background-color: #FFFFFF;">
     <div class="app-container">
-      <el-tabs v-model="activeName">
-        <el-tab-pane label="轮播管理" name="first">
       <!--顶部搜索区-->
       <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="68px">
         <el-form-item prop="title">
@@ -108,9 +106,8 @@
                 <el-button
                   v-hasPermi="['business:banner:query']"
                   icon="el-icon-document"
-                      plain
                   size="mini"
-                      style="width: 50px; border-radius: 6px 6px 6px 6px;border: 1px solid rgb(95,181,75);"
+                  class="form-detail-button"
                   type="success"
                   @click="handleDetail(scope.row)"
                 >详情
@@ -120,9 +117,9 @@
                 <el-button
                   v-hasPermi="['business:banner:edit']"
                   icon="el-icon-edit"
-                      plain
                   size="mini"
-                      style="width: 50px; border-radius: 6px 6px 6px 6px;border: 1px solid rgb(52,144,206);"
+                  class="form-edit-button"
+                  :disabled="scope.row.status === '1'"
                   type="primary"
                   @click="handleUpdate(scope.row)"
                 >编辑
@@ -133,7 +130,6 @@
                   key="1"
                   v-hasPermi="['business:banner:remove']"
                   icon="el-icon-delete"
-                      plain
                   size="mini"
                   style="width: 50px; border-radius: 6px 6px 6px 6px;border: 1px solid rgb(219,71,71);"
                   type="danger"
@@ -167,14 +163,12 @@
         :limit.sync="queryParams.pageSize"
         @pagination="getBannerList"
       />
-        </el-tab-pane>
-      </el-tabs>
     </div>
   </div>
 </template>
 
 <script>
-import { listBanner, delBanner, addBanner, updateBanner } from '@/api/business/banner'
+import { listBanner, delBanner, updateBanner } from '@/api/business/banner'
 
 export default {
   name: 'BannerManagement',
@@ -311,31 +305,11 @@ export default {
     handleDetail(row) {
       this.$router.push('/banner-management/banner-detail?id=' + row.id)
     },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs['form'].validate(valid => {
-        if (valid) {
-          if (this.form.id != null) {
-            updateBanner(this.form).then(response => {
-              this.$modal.msgSuccess('修改成功')
-              this.open = false
-              this.getBannerList()
-            })
-          } else {
-            addBanner(this.form).then(response => {
-              this.$modal.msgSuccess('新增成功')
-              this.open = false
-              this.getBannerList()
-            })
-          }
-        }
-      })
-    },
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids
 
-      this.$confirm('是否确认删除此条数据，删除后不可恢复', '提示', {
+      this.$confirm('是否确认删除此条数据，删除后不可恢复', '删除', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         customClass: 'box-logout',
@@ -377,7 +351,9 @@ export default {
 
 <style lang="scss" scoped>
 .app-container {
-  padding: 0 1.5rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-top: 1.5rem;
   margin-bottom: 0.5em;
 }