页面优化

zhanghua

2024-03-15 61d25d1c1c58da842b971ddb3df9922293c48c1d

页面优化

 src/assets/styles/index.scss

@@ -18,7 +18,7 @@
}

label {
  font-weight: 700;
  // font-weight: 700;
}

html {

 src/assets/styles/ruoyi.scss

@@ -72,7 +72,7 @@
}

.el-form .el-form-item__label {
  font-weight: 700;
  // font-weight: 700;
}
.el-dialog:not(.is-fullscreen) {
  margin-top: 6vh !important;

 src/views/ti/trafficIndex/index.vue

@@ -32,10 +32,14 @@
                <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['rs:trafficIndex:add']">新增</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['rs:trafficIndex:edit']">修改</el-button>
              <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['rs:trafficIndex:edit']"
                >修改</el-button
              >
              </el-col>
              <el-col :span="1.5">
                <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['rs:trafficIndex:remove']">删除</el-button>
              <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['rs:trafficIndex:remove']"
                >删除</el-button
              >
              </el-col>
              <el-col :span="1.5">
                <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['rs:trafficIndex:export']">导出</el-button>
@@ -75,13 +79,7 @@
            </el-table-column>
          </el-table>

          <pagination
              v-show="total>0"
              :total="total"
              v-model:page="queryParams.pageNum"
              v-model:limit="queryParams.pageSize"
              @pagination="getList"
          />
        <pagination v-show="total>0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
        </el-card>
      </div>
      <div v-show="activeName=='second'">
@@ -94,24 +92,13 @@
                  <div>
                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                    <span class="el-upload-list__item-actions">
                      <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)"
                      >
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                        <el-icon><zoom-in /></el-icon>
                      </span>
                      <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleDownload(file)"
                      >
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                        <el-icon><Download /></el-icon>
                      </span>
                      <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleRemove(file)"
                      >
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                        <el-icon><Delete /></el-icon>
                      </span>
                    </span>
@@ -126,10 +113,10 @@
        </transition>
      </div>
    <!-- 添加或修改交通指数对话框 -->
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
      <el-form ref="trafficIndexFormRef" :model="form" :rules="rules" label-width="80px">
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="840px" append-to-body>
      <el-form ref="trafficIndexFormRef" :model="form" :inline="true" :rules="rules" label-width="80px">
        <el-form-item label="模块名称" prop="modeName">
          <el-input v-model="form.modeName" placeholder="请输入模块名称" />
          <el-input class="el-input__width" v-model="form.modeName" placeholder="请输入模块名称" />
        </el-form-item>
        <el-form-item label="统计周期" prop="periodDate" @change="clearPeriod">
          <el-select v-model="form.period" placeholder="请选择" style="width: 100px;">
@@ -137,16 +124,22 @@
            <el-option key="2" label="月度" :value="2" />
          </el-select>
          &emsp;
          <el-date-picker v-model="form.periodDate" :type="pickerType" :value-format="pickerFormat" placeholder="请选择统计周期" />
          <el-date-picker
            v-model="form.periodDate"
            :type="pickerType"
            :value-format="pickerFormat"
            placeholder="请选择统计周期"
            style="width: 150px;"
          />
        </el-form-item>
        <el-form-item label="指标1" prop="targetOneName">
          <el-input v-model="form.targetOneName" placeholder="请输入指标1名称" />
          <el-input class="el-input__width" v-model="form.targetOneName" placeholder="请输入指标1名称" />
        </el-form-item>
        <el-form-item label="数值" prop="targetOneValue">
          <el-input v-model="form.targetOneValue" placeholder="请输入指标1值" />
          <el-input class="el-input__width" v-model="form.targetOneValue" placeholder="请输入指标1值" />
        </el-form-item>
        <el-form-item label="单位" prop="targetOneUnit">
          <el-input v-model="form.targetOneUnit" placeholder="请输入指标1单位" />
          <el-input class="el-input__width" v-model="form.targetOneUnit" placeholder="请输入指标1单位" />
        </el-form-item>
        <el-form-item label="涨幅" prop="targetOneCompareValue">
          <el-select v-model="form.targetOneStatus" placeholder="请选择" style="width: 100px;">
@@ -154,16 +147,16 @@
            <el-option key="2" label="下降" :value="2" />
          </el-select>
          &emsp;
          <el-input v-model="form.targetOneCompareValue" placeholder="请输入指标1上浮或下降值" style="width: 200px;"/>
          <el-input v-model="form.targetOneCompareValue" style="width: 150px;" />
        </el-form-item>
        <el-form-item label="指标2" prop="targetTwoName">
          <el-input v-model="form.targetTwoName" placeholder="请输入指标2名称" />
          <el-input class="el-input__width" v-model="form.targetTwoName" placeholder="请输入指标2名称" />
        </el-form-item>
        <el-form-item label="数值" prop="targetTwoValue">
          <el-input v-model="form.targetTwoValue" placeholder="请输入指标2值" />
          <el-input class="el-input__width" v-model="form.targetTwoValue" placeholder="请输入指标2值" />
        </el-form-item>
        <el-form-item label="单位" prop="targetTwoUnit">
          <el-input v-model="form.targetTwoUnit" placeholder="请输入指标2单位" />
          <el-input class="el-input__width" v-model="form.targetTwoUnit" placeholder="请输入指标2单位" />
        </el-form-item>
        <el-form-item label="涨幅" prop="targetTwoCompareValue">
          <el-select v-model="form.targetTwoStatus" placeholder="请选择" style="width: 100px;">
@@ -171,16 +164,16 @@
            <el-option key="2" label="下降" :value="2" />
          </el-select>
          &emsp;
          <el-input v-model="form.targetTwoCompareValue" placeholder="请输入指标2上浮或下降值" style="width: 200px;" />
          <el-input v-model="form.targetTwoCompareValue" style="width: 150px;" />
        </el-form-item>
        <el-form-item label="指标3" prop="targetThreeName">
          <el-input v-model="form.targetThreeName" placeholder="请输入指标3名称" />
          <el-input class="el-input__width" v-model="form.targetThreeName" placeholder="请输入指标3名称" />
        </el-form-item>
        <el-form-item label="数值" prop="targetThreeValue">
          <el-input v-model="form.targetThreeValue" placeholder="请输入指标3值" />
          <el-input class="el-input__width" v-model="form.targetThreeValue" placeholder="请输入指标3值" />
        </el-form-item>
        <el-form-item label="单位" prop="targetThreeUnit">
          <el-input v-model="form.targetThreeUnit" placeholder="请输入指标3单位" />
          <el-input class="el-input__width" v-model="form.targetThreeUnit" placeholder="请输入指标3单位" />
        </el-form-item>
        <el-form-item label="涨幅" prop="targetThreeCompareValue">
          <el-select v-model="form.targetThreeStatus" placeholder="请选择" style="width: 100px;">
@@ -188,16 +181,16 @@
            <el-option key="2" label="下降" :value="2" />
          </el-select>
          &emsp;
          <el-input v-model="form.targetThreeCompareValue" placeholder="请输入指标3上浮或下降值" style="width: 200px;" />
          <el-input v-model="form.targetThreeCompareValue" style="width: 150px;" />
        </el-form-item>
        <el-form-item label="指标4" prop="targetFourName">
          <el-input v-model="form.targetFourName" placeholder="请输入指标4名称" />
          <el-input class="el-input__width" v-model="form.targetFourName" placeholder="请输入指标4名称" />
        </el-form-item>
        <el-form-item label="数值" prop="targetFourValue">
          <el-input v-model="form.targetFourValue" placeholder="请输入指标4值" />
          <el-input class="el-input__width" v-model="form.targetFourValue" placeholder="请输入指标4值" />
        </el-form-item>
        <el-form-item label="单位" prop="targetFourUnit">
          <el-input v-model="form.targetFourUnit" placeholder="请输入指标4单位" />
          <el-input class="el-input__width" v-model="form.targetFourUnit" placeholder="请输入指标4单位" />
        </el-form-item>
        <el-form-item label="涨幅" prop="targetFourCompareValue">
          <el-select v-model="form.targetFourStatus" placeholder="请选择" style="width: 100px;">
@@ -205,10 +198,10 @@
            <el-option key="2" label="下降" :value="2" />
          </el-select>
          &emsp;
          <el-input v-model="form.targetFourCompareValue" placeholder="请输入指标4上浮或下降值" style="width: 200px;" />
          <el-input class="el-input__width" v-model="form.targetFourCompareValue" style="width: 150px;" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="form.status" placeholder="请选择">
          <el-select v-model="form.status" placeholder="请选择" style="width: 265px;">
            <el-option key="1" label="已启用" :value="1" />
            <el-option key="2" label="已禁用" :value="2" />
          </el-select>
@@ -537,3 +530,9 @@
  console.log(file)
}
</script>

<style scoped>
.el-input__width {
        width: 265px;
 }
</style>