轮播管理详情样式修改

src/views/banner_management/banner_detail.vue

@@ -11,25 +11,43 @@
       <div>
         <el-form ref="form" :model="form" label-width="133px">
           <el-form-item label="标题：" prop="title">
-            <span class="formSpan">{{ form.title || '暂无数据' }}</span>
+            <el-input v-model.trim="form.title" class="form-input" style="width: 420px" maxlength="20" show-word-limit clearable disabled />
           </el-form-item>
           <el-form-item label="轮播图：" prop="img">
             <el-image :src="baseUrl + form.img" class="formImg" :preview-src-list="srcList" />
           </el-form-item>
           <el-form-item label="跳转地址：" prop="url">
-            <span class="formSpan">{{ form.url || '暂无数据' }}</span>
+            <el-input v-model.trim="form.url" class="form-input" style="width: 420px" maxlength="30" show-word-limit clearable disabled />
           </el-form-item>
           <el-form-item label="权重：" prop="sort">
-            <span class="formSpan">{{ form.sort || '暂无数据' }}</span>
+            <el-input-number
+              v-model="form.sort"
+              class="weight-number"
+              :max="9999"
+              :min="0"
+              controls-position="right"
+              disabled
+            />
           </el-form-item>
           <el-form-item label="创建日期：" prop="createTime">
             <span class="formSpan">{{ form.createTime || '暂无数据' }}</span>
           </el-form-item>
           <el-form-item label="状态：" prop="status">
-            <span class="formSpan">{{ form.status === '1' ? '已发布':'未发布' }}</span>
+            <span style="height: 2.5rem;line-height: 2.5rem">
+              <el-switch
+                v-model="form.status"
+                active-color="#13ce66"
+                inactive-color="#f5aa6c"
+                active-value="1"
+                inactive-value="2"
+                disabled
+              />
+              <span v-if="form.status === '1'" style="color: #67C23A;margin-left: 5px;">已发布</span>
+              <span v-else style="color: #f5aa6c;margin-left: 5px;">未发布</span>
+            </span>
           </el-form-item>
           <el-form-item label="备注：" prop="notes">
-            <span class="formSpan">{{ form.notes || '暂无数据' }}</span>
+            <el-input disabled v-model.trim="form.notes" class="form-input" style="width: 420px" maxlength="60" show-word-limit clearable />
           </el-form-item>
           <el-form-item>
             <el-button class="resetBtn" icon="el-icon-back" @click="goBack">返回</el-button>