金豆消耗文章

src/views/consume/bean/articleVideo.vue

@@ -464,36 +464,41 @@ const getTagText = (state) => {
 
 <template>
   <el-card style="margin-bottom: 10px;margin-top:10px">
-        <el-col style="margin-bottom: 10px">
+    <el-col style="margin-bottom: 10px; ">
+      <div style="display:flex">
+        <div style="width: 15vw; display:flex; align-items:center">
           <el-text>精网号：</el-text>
-          <el-input v-model="beanConsumeArticle.jwcode" placeholder="请输入精网号" style="width: 200px;margin-right: 20px" clearable />
-          
+          <el-input v-model="beanConsumeArticle.jwcode" style="width:10vw;" placeholder="请输入精网号" clearable />
+        </div>
+        <div style="width: 15vw; display:flex; align-items:center">
           <el-text>地区：</el-text>
-          <el-select v-model="beanConsumeArticle.dept" placeholder="请选择地区" style="width: 200px;margin-right: 20px" clearable>
+          <el-select v-model="beanConsumeArticle.dept" style="width:10vw;" placeholder="请选择地区" clearable>
             <el-option v-for="(item, index) in dept" :key="index" :label="item" :value="item" />
           </el-select>
-
+        </div>
+        <div style="width: 15vw; display:flex; align-items:center">
           <el-text>类型：</el-text>
-          <el-select v-model="beanConsumeArticle.payMode" placeholder="请选择类型" style="width: 200px;margin-right: 20px" clearable
-            @change="handlePayModeChange">
+          <el-select v-model="beanConsumeArticle.payMode" style="width:10vw;" placeholder="请选择类型" clearable @change="handlePayModeChange">
             <el-option label="打赏" value="0" />
             <el-option label="付费购买" value="1" />
             <el-option label="其他" value="2" />
           </el-select>
-
+        </div>
+        <div style="width: 15vw; display:flex; align-items:center">
           <el-text>文章/视频ID：</el-text>
-          <el-input v-model="beanConsumeArticle.articleId" placeholder="请输入文章/视频ID" style="width: 200px;margin-right: 20px" clearable />
-
-          <el-text>文章/视频标题：</el-text>
-          <el-input v-model="beanConsumeArticle.articleName" placeholder="请输入文章/视频标题" style="width: 200px" clearable />
+          <el-input v-model="beanConsumeArticle.articleId" style="width:10vw;" placeholder="请输入文章/视频ID" clearable />
+        </div>
+        <div style="width: 15vw; display:flex; align-items:center; margin-left:1vw">
+          <el-text>作者：</el-text>
+          <el-input v-model="beanConsumeArticle.author"style="width:10vw;" placeholder="请输入作者" clearable />
+        </div>
+      </div>
     </el-col>
     <el-col>
-            <el-text>作者：</el-text>
-            <el-input v-model="beanConsumeArticle.author" placeholder="请输入作者" style="width: 200px;margin-right: 20px" clearable />
-
+      <div>
         <el-text>付费时间：</el-text>
         <el-date-picker v-model="getTime" type="datetimerange" range-separator="至" start-placeholder="起始时间"
-              end-placeholder="结束时间" style="width: 400px;margin-right: 10px" @change="handleDatePickerChange"
+          end-placeholder="结束时间" style="width: 20vw;margin-right: 10px" @change="handleDatePickerChange"
           value-format="YYYY-MM-DD HH:mm:ss" :default-time="defaultTime" />
   
         <el-button @click="getToday()" :type="activeTimeRange === 'today' ? 'primary' : ''">今</el-button>
@@ -504,6 +509,7 @@ const getTagText = (state) => {
         <el-button type="primary" @click="search()">查询</el-button>
         <el-button type="primary" @click="exportExcel()">导出Excel</el-button>
         <el-button type="primary" @click="openExportList">查看导出列表</el-button>
+      </div>
     </el-col>
   </el-card>
   <el-card>