src/views/collection/seriesList.vue

@@ -1,15 +1,317 @@
 <template>
   <div class="right" :style="{ height: height, width: width }">
-    1
+    <div class="searchbox">
+      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
+        <div class="search_content">
+          <span>
+            <svg t="1676477903545" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2780" width="16" height="16"><path d="M474.453333 884.053333c-225.28 0-409.6-184.32-409.6-409.6s184.32-409.6 409.6-409.6 409.6 184.32 409.6 409.6-184.32 409.6-409.6 409.6z m0-68.266666c187.733333 0 341.333333-153.6 341.333334-341.333334s-153.6-341.333333-341.333334-341.333333-341.333333 153.6-341.333333 341.333333 153.6 341.333333 341.333333 341.333334z m252.586667 54.613333c-13.653333-13.653333-10.24-37.546667 3.413333-47.786667s37.546667-10.24 47.786667 3.413334l64.853333 78.506666c13.653333 13.653333 10.24 37.546667-3.413333 47.786667s-37.546667 10.24-47.786667-3.413333l-64.853333-78.506667z" fill="#2c2c2c" p-id="2781"></path></svg>
+            <span>筛选搜索</span>
+          </span>
+          <button type="button" class="el-button el-button--primary el-button--small">
+            <span>查询搜索</span>
+          </button>
+          <button type="button" class="el-button el-button--default el-button--small">
+            <span>重置</span>
+          </button>
+        </div>
+        
+        <div class="block">
+          
+          <div class="block_left">
+            <div>
+              <span class="demonstration">藏品名称（套）：</span>
+            </div>
+            <div class="block_input"> 
+             <el-input v-model="input" placeholder="请输入藏品名称" clearable ></el-input>
+            </div>
+            
+          </div>
+          
+          <div class="block_right">
+            <div>
+              <span class="demonstration">创建时间：</span>
+            </div>
+            <el-date-picker v-model="value1" type="daterange" align="right" unlink-panels range-separator="至" 
+              start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
+            </el-date-picker>
+          </div>
+        </div>
+      </el-form>
+      
+    </div>
+    <div class="total">
+        <i  class="el-icon-tickets" style="margin-right: 5px;"></i>
+      <span>套系列表 共有</span>
+      <span  style="color: rgb(24, 144, 255);">{{ total1 }}</span>
+      <span>条数据 </span>
+      <button type="button" class="el-button el-button--default el-button--small total-but-add">
+            <span>添加</span>
+          </button>
+    </div>
+    <div class="list">
+      <div>
+        <div class="list-total">
+          <el-radio-group v-model="radio1">
+          <el-radio-button label="在售"></el-radio-button>
+          <el-radio-button label="预售"></el-radio-button>
+          <el-radio-button label="已过期"></el-radio-button>
+          
+          </el-radio-group>
+        </div>
+      </div>
+      <div class="list-data">
+        <el-table
+        border="true"
+    :data="tableData"
+    style="width: 100%">
+    <el-table-column
+      align="center"
+      label="ID"
+      width="100">
+      <template slot-scope="scope">
+        <span >{{ scope.row.id }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      align="center"
+      label="商品名称（套）"
+      width="200">
+      <template slot-scope="scope">
+        <span >{{ scope.row.name }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      align="center"
+      label="创建时间"
+      width="200">
+      <template slot-scope="scope">
+       
+        <span >{{ scope.row.date }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      align="center"
+      label="展示时间"
+      width="200">
+      <template slot-scope="scope">
+       
+        <span >{{ scope.row.time }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      align="center"
+      label="藏品数量"
+      width="198">
+      <template slot-scope="scope">
+        <span >{{ scope.row.num }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      align="center"
+      label="状态"
+      width="200">
+      <template slot-scope="scope">
+          <div slot="reference" class="name-wrapper">
+            <el-tag size="medium">{{ scope.row.state }}</el-tag>
+          </div>
+       
+      </template>
+    </el-table-column>
+    <el-table-column
+      align="center"
+      label="操作"
+      width="200">
+      <template>
+        <div>
+          <el-button
+          type="text"
+          size="small">
+          藏品列表
+        </el-button>
+        </div>
+        
+        <el-button
+          type="text"
+          size="small">
+          上架
+        </el-button>
+        <el-button
+          type="text"
+          size="small">
+          修改时间
+        </el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+      </div>
+      <div class="paging-button">
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          page-size="6"
+          pager-count="6"
+          current-page="1"
+          hide-on-single-page="true"
+          :total="total1">
+        </el-pagination>
+      </div>
+    </div>
   </div>
 </template>
 <script>
 
+ export default {
+    data() {
+      return {
+        tableData: [
+        
+        {
+          id:12121,
+          name: '测试',
+          date: '2016-05-02',
+          time:'2023-02-10:00:00-2023-02-16:00:00:00',
+          num: 2,
+          state:'已上架'
+        },
+        {
+          id:12121,
+          name: '测试',
+          date: '2016-05-02',
+          time:'2023-02-10:00:00-2023-02-16:00:00:00',
+          num: 2,
+          state:'已上架'
+        },
+        {
+          id:121,
+          name: '测试1',
+          date: '2016-05-02',
+          time:'2023-02-10:00:00-2023-02-16:00:00:00',
+          num: 21,
+          state:'已上架'
+        },
+        {
+          id:12121,
+          name: '测试3',
+          date: '2016-05-02',
+          time:'2023-02-10:00:00-2023-02-16:00:00:00',
+          num: 6,
+          state:'已上架'
+        },
+        {
+          id:12121,
+          name: '测试',
+          date: '2016-05-02',
+          time:'2023-02-10:00:00-2023-02-16:00:00:00',
+          num: 3,
+          state:'已上架'
+        },
+        {
+          id:12121,
+          name: '测试',
+          date: '2016-05-02',
+          time:'2023-02-10:00:00-2023-02-16:00:00:00',
+          num: 2,
+          state:'已上架'
+        }],
+        pickerOptions: {
+          shortcuts: [{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        value1: '',
+        input: '',
+        radio1:"在售",
+        total1:6,
+      };
+    },
+    methods: {
+    }
+  }; 
 
 
 </script>
 
 <style scoped>
+.list-data{
+    border: 1px solid #ebebeb;
+    margin: -1px 15px 20px 20px;
+}
+.paging-button{
+  margin-left: 1100px;
+}
+.list-total{
+  margin-left: 20px;
+}
+.total-but-add{
+  float: right;
+  margin-top: -5px;
+}
+.block_left,.block_right {
+  text-align:center;
+  line-height: 36px;
+  font-size: 14px;
+  color: #606266;
+}
+.block_right{
+  margin-left: 60px;
+}
+.block span{
+  padding-left: 20px;
+  margin-bottom: -20px;
+}
+.block div{
+  float: left;
+  text-align:center
+}
+.block{
+  margin-top: 34px;
+}
+.block_input{
+  width: 400px;
+}
+.search_content{
+  margin-bottom: 20px;
+}
+.searchbox button {
+    float: right;
+    margin-left: 15px;
+}
+.searchbox,.total{
+    border: 1px solid #ebebeb;
+    margin: 20px 15px 20px 20px;
+    padding: 20px;
+    border-radius: 4px;
+    height: 160px;
+}
+.total{
+  border: 1px solid #ebebeb;
+    margin: 20px 15px 20px 20px;
+    padding: 20px;
+    border-radius: 4px;
+    height: 62px;
+}
 .up {
   width: 96%;
   height: 170px;