From e04d2e926a3179c1b92a8ab12d83110008d34fc3 Mon Sep 17 00:00:00 2001
From: fengdong777 <1478994744@qq.com>
Date: Thu, 1 Jun 2023 18:27:22 +0800
Subject: [PATCH] 6.1

---
 .../oilTypeInAndOutBound.js                   |  24 ++
 .../src/api/supplier/supplier.js              |  12 +
 .../src/views/inventory/EnterRecord/index.vue |   7 +-
 .../src/views/inventory/OutRecord/index.vue   | 346 +++++++++++++++++-
 .../views/supervise/EnterRegister/index.vue   |   9 +-
 .../src/views/supervise/OutRegister/index.vue | 282 +++++++++++++-
 6 files changed, 660 insertions(+), 20 deletions(-)

diff --git a/yxt-supervise-cyf/yxt-supervise-cyf-ui/src/api/oilTypeInAndOutBound/oilTypeInAndOutBound.js b/yxt-supervise-cyf/yxt-supervise-cyf-ui/src/api/oilTypeInAndOutBound/oilTypeInAndOutBound.js
index 435c6992..24fcfd06 100644
--- a/yxt-supervise-cyf/yxt-supervise-cyf-ui/src/api/oilTypeInAndOutBound/oilTypeInAndOutBound.js
+++ b/yxt-supervise-cyf/yxt-supervise-cyf-ui/src/api/oilTypeInAndOutBound/oilTypeInAndOutBound.js
@@ -126,4 +126,28 @@ export default {
         }
       })
     },
+    // 查询入库记录
+    storageListPage: function(params) {
+      return request({
+        url: '/cyf/storage/listPage',
+        method: 'post',
+        data: params,
+        headers: {
+          'Content-Type': 'application/json',
+          'token': tokens
+        }
+      })
+    },
+    // 查询出库记录
+    outboundListPage: function(params) {
+      return request({
+        url: '/cyf/outbound/listPage',
+        method: 'post',
+        data: params,
+        headers: {
+          'Content-Type': 'application/json',
+          'token': tokens
+        }
+      })
+    },
 }
diff --git a/yxt-supervise-cyf/yxt-supervise-cyf-ui/src/api/supplier/supplier.js b/yxt-supervise-cyf/yxt-supervise-cyf-ui/src/api/supplier/supplier.js
index c9ac3283..09c789ce 100644
--- a/yxt-supervise-cyf/yxt-supervise-cyf-ui/src/api/supplier/supplier.js
+++ b/yxt-supervise-cyf/yxt-supervise-cyf-ui/src/api/supplier/supplier.js
@@ -58,5 +58,17 @@ export default {
       }
     })
   },
+  // 成品出库登记
+  save: function(params) {
+    return request({
+      url: '/cyf/outbound/save',
+      method: 'post',
+      data: params,
+      headers: {
+        'Content-Type': 'application/json',
+        'token': tokens
+      }
+    })
+  },
 
 }
diff --git a/yxt-supervise-cyf/yxt-supervise-cyf-ui/src/views/inventory/EnterRecord/index.vue b/yxt-supervise-cyf/yxt-supervise-cyf-ui/src/views/inventory/EnterRecord/index.vue
index 2443d262..931f1efa 100644
--- a/yxt-supervise-cyf/yxt-supervise-cyf-ui/src/views/inventory/EnterRecord/index.vue
+++ b/yxt-supervise-cyf/yxt-supervise-cyf-ui/src/views/inventory/EnterRecord/index.vue
@@ -14,7 +14,7 @@
                   clearable />
               </el-form-item>
               <el-form-item label="日期">
-                <el-date-picker v-model="jmdListQuery.date" type="date" :picker-options="pickerOptions" clearable value-format="yyyy-MM-dd"
+                <el-date-picker v-model="jmdListQuery.warehousingDate" type="date" :picker-options="pickerOptions" clearable value-format="yyyy-MM-dd"
                   placeholder="选择日期" />
               </el-form-item>
             </el-form>
@@ -194,7 +194,7 @@
 
         jmdListQuery: {
           contractNumber: "",
-          date: ""
+          warehousingDate: ""
         },
         pickerOptions:{
           disabledDate(time){
@@ -228,8 +228,9 @@
       resetQuery() {
         this.jmdListQuery = {
           contractNumber: "",
-          date: ""
+          warehousingDate: ""
         }
+        this.loadLogList()
       },
       // 右上角点击事件
       btnHandle(btnKey) {
diff --git a/yxt-supervise-cyf/yxt-supervise-cyf-ui/src/views/inventory/OutRecord/index.vue b/yxt-supervise-cyf/yxt-supervise-cyf-ui/src/views/inventory/OutRecord/index.vue
index 365c992e..38185fcb 100644
--- a/yxt-supervise-cyf/yxt-supervise-cyf-ui/src/views/inventory/OutRecord/index.vue
+++ b/yxt-supervise-cyf/yxt-supervise-cyf-ui/src/views/inventory/OutRecord/index.vue
@@ -1,13 +1,339 @@
 <template>
-    <div>成品出库记录</div>
-  </template>
-  
-  <script>
+  <div class="app-container">
+    <div v-show="viewState ==1">
+      <button-bar ref="btnbar" view-title="成品出库记录" :btndisabled="btndisabled" @btnhandle="btnHandle" />
+      <div class="main-content">
+        <div class="searchcon">
+          <el-button size="small" class="searchbtn" @click="clicksearchShow">
+            {{ searchxianshitit }}
+          </el-button>
+          <div v-show="isSearchShow" class="search">
+            <el-form ref="queryParams" :model="jmdListQuery" :inline="true" class="tab-header">
+              <el-form-item label="合同编号">
+                <el-input v-model="jmdListQuery.salesContractNumber" maxlength="20" placeholder="请输入合同编号" class="addinputw"
+                  clearable />
+              </el-form-item>
+              <el-form-item label="日期">
+                <el-date-picker v-model="jmdListQuery.deliveryDate" type="date" :picker-options="pickerOptions" clearable value-format="yyyy-MM-dd"
+                  placeholder="选择日期" />
+              </el-form-item>
+            </el-form>
+            <div class="btn" style="text-align: center;">
+              <el-button type="primary" size="small" icon="el-icon-search" @click="dosearch">查询</el-button>
+              <el-button type="primary" size="small" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+            </div>
+          </div>
+        </div>
+        <div>
+          <el-table v-loading="tableLoading1" :data="logList" border style="width: 100%">
+            <el-table-column fixed width="80" type="index" label="序号" :index="indexMethod" align="center" />
+            <el-table-column prop="salesContractNumber" label="销售合同号" width="150" align="center" />
+            <el-table-column prop="contractSigningDate" label="签订日期" width="150" align="center" />
+            <el-table-column prop="deliveryDate" label="出库时间" width="150" align="center" />
+            <el-table-column prop="inforName" label="品牌名称" width="150" align="center" />
+            <el-table-column prop="prodName" label="商品名称" width="150" align="center" />
+            <el-table-column prop="typeName" label="商品类别名称" width="150" align="center" />
+            <el-table-column prop="weight" label="净重" width="150" align="center" />
+            <el-table-column prop="value" label="价值" width="150" align="center" />
+            <el-table-column prop="amount" label="商品数量" width="150" align="center" />
+            <!-- <el-table-column  fixed="right" label="操作" width="100" align="center">
+            <template slot-scope="scope">
+              <el-button
+                type="primary"
+                size="mini"
+                @click="purchase(scope.row)"
+              >
+                查看详情
+              </el-button>
+            </template>0
+          </el-table-column> -->
+          </el-table>
+        </div>
+        <div class="pages">
+          <!-- 翻页 -->
+          <pagination v-show="logListTotal > 0" :total="logListTotal" :page.sync="logListQuery.current"
+            :limit.sync="logListQuery.size" class="pagination" @pagination="loadLogList" />
+        </div>
+
+      </div>
+      <!-- <el-dialog
+      :title="dialogTitle + '详细信息'"
+      :visible.sync="editDialog"
+      width="60%"
+    >
+    <el-form ref="dataForm" :model="form" label-position="top" label-width="190px" class="formadd">
+      <div class="title" style="display: flex;align-items: center;justify-content: space-between;height:40px">
+            <div>原油信息</div>
+          </div>
+        <el-row>
+            <el-col :span="4" class="trightb">
+              <el-form-item class="trightb_item">
+                <span slot="label">销售合同编号</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item class="trightb_item">
+                <span>{{form.contractNumber}}</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4" class="trightb">
+              <el-form-item class="trightb_item">
+                <span slot="label">签订时间</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item class="trightb_item">
+                <span>{{form.contractSigningDate}}</span>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="4" class="trightb">
+              <el-form-item class="trightb_item">
+                <span slot="label">净重</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item class="trightb_item">
+                <span>{{form.weight}}</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4" class="trightb">
+              <el-form-item class="trightb_item">
+                <span slot="label">价值</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item class="trightb_item">
+                <span>{{form.value}}</span>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="4" class="trightb">
+              <el-form-item class="trightb_item">
+                <span slot="label">发货车牌号</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item class="trightb_item">
+                <span>{{form.licensePlateNumber}}</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4" class="trightb">
+              <el-form-item class="trightb_item">
+                <span slot="label">入库日期</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item class="trightb_item">
+                <span>{{form.warehousingDate}}</span>
+              </el-form-item>
+            </el-col>
+          </el-row>
+      <el-form-item label="描述:" >
+        <el-popover placement="left" trigger="hover" :key="i" v-for="(item,i) in SrcList" style="margin-left: 20px;">
+            <img :src="item.url" style="width: 600px;height: 600px">
+            <img slot="reference" :src="item.url" style="width: 200px;height: 200px">
+         </el-popover>
+      </el-form-item>
+        </el-form>
+    </el-dialog> -->
+
+    </div>
+  </div>
+</template>
+
+<script>
+  import req from '@/api/oilTypeInAndOutBound/oilTypeInAndOutBound'
+  import Pagination from '@/components/pagination'
+  import {
+    parseTime
+  } from '@/utils/index'
+  import ButtonBar from '@/components/ButtonBar'
   export default {
-  
+    components: {
+      ButtonBar,
+      Pagination,
+    },
+    data() {
+      return {
+        viewState: 1,
+        tabActiveName: 'uplog',
+        index: "0",
+        isSearchShow: false,
+        searchxianshitit: '显示查询条件',
+        btndisabled: false,
+        tableLoading1: false,
+        tableLoading2: false,
+        dialogTitle:'',
+        editDialog:false,
+        form:{},
+        SrcList:{},
+        btnList: [ 
+          {
+            type: 'info',
+            size: 'small',
+            icon: 'cross',
+            btnKey: 'doClose',
+            btnLabel: '关闭'
+          }
+        ],
+        logList: [],
+        logListQuery: {
+          current: 1,
+          size: 10
+        },
+        logListTotal: 1,
+        in112List: [],
+        in112ListQuery: {
+          current: 1,
+          size: 10
+        },
+        in112ListTotal: 1,
+
+        jmdListQuery: {
+          salesContractNumber: "",
+          deliveryDate: ""
+        },
+        pickerOptions:{
+          disabledDate(time){
+          return time.getTime()> Date.now();// 如果没有后面的-8.64e7就是不可以选择今天的
+          }
+      }
+      }
+    },
+    mounted() {
+      // 初始化按钮
+      this.$refs['btnbar'].setButtonList(this.btnList)
+    },
+    created() {
+      // 初始化变量
+      this.init()
+    },
+    methods: {
+      // 搜索条件效果
+      clicksearchShow() {
+        this.isSearchShow = !this.isSearchShow
+        if (this.isSearchShow) {
+          this.searchxianshitit = '隐藏查询条件'
+        } else {
+          this.searchxianshitit = '显示查询条件'
+        }
+      },
+      dosearch() {
+        this.loadLogList()
+
+      },
+      resetQuery() {
+        this.jmdListQuery = {
+          salesContractNumber: "",
+          deliveryDate: ""
+        }
+        this.loadLogList()
+      },
+      // 右上角点击事件
+      btnHandle(btnKey) {
+        switch (btnKey) {
+          case 'toAdd1': // 新增入库
+            this.doAdd1()
+            break
+          case 'toAdd2': // 新增出库
+            this.doAdd2()
+            break
+          case 'build': // 导出
+            this.doBuild()
+            break
+          case 'doClose': // 关闭
+            this.doClose()
+            break
+          default:
+            break
+        }
+      },
+      init() {
+        this.loadLogList()
+      },
+      purchase(row){
+        this.dialogTitle = "数据";
+        this.editDialog = true;
+        req.selectStorageBySid(row.sid).then((res)=>{
+          this.form=res.data[0]
+          this.SrcList=res.data
+        })
+      },
+      handleOrder(tab, event) {
+        console.log("tab", tab)
+        // this.listQuery.status = tab.name;
+        // this.getList();
+        // this.orderDatas(tab.name);
+
+        this.index = tab.index
+
+        switch (tab.index) {
+          // 入库
+          case "0":
+            if (this.logList.length == 0)
+              this.loadLogList()
+            break;
+            // 出库
+          case "1":
+            if (this.in112List.length == 0)
+              this.loadIn112List()
+            break;
+          default:
+            break;
+        }
+
+      },
+      loadLogList() {
+        req.outboundListPage({
+          current: this.logListQuery.current,
+          size: this.logListQuery.size,
+          params: this.jmdListQuery
+        }).then(response => {
+          if (response.code === '200' && response.data && response.data.total > 0) {
+            this.logList = response.data.records
+            this.logListTotal = response.data.total
+            this.logListQuery.current = response.data.current
+            this.logListQuery.size = response.data.size
+          } else {
+            this.logList = []
+            this.logListTotal = 0
+          }
+        })
+      },
+      // 序号
+      indexMethod(index) {
+        var pagestart = (this.logListQuery.current - 1) * this.logListQuery.size
+        var pageindex = index + 1 + pagestart
+        return pageindex
+      },
+      resetState() {
+        this.viewState = 1
+      },
+      doClose() {
+        this.$store.dispatch('tagsView/delView', this.$route)
+        this.$router.go(-1)
+      }
+    }
   }
-  </script>
-  
-  <style>
-  
-  </style>
\ No newline at end of file
+</script>
+<style scoped>
+  .wenjiantit {
+    font-size: 16px;
+    font-weight: bold;
+    margin: 25px 0 10px 0;
+  }
+
+  .forminfo {
+    margin: 0;
+    padding: 0;
+  }
+
+  .listcon {
+    height: calc(100vh - 250px);
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+</style>
\ No newline at end of file
diff --git a/yxt-supervise-cyf/yxt-supervise-cyf-ui/src/views/supervise/EnterRegister/index.vue b/yxt-supervise-cyf/yxt-supervise-cyf-ui/src/views/supervise/EnterRegister/index.vue
index ac4cf08d..be467903 100644
--- a/yxt-supervise-cyf/yxt-supervise-cyf-ui/src/views/supervise/EnterRegister/index.vue
+++ b/yxt-supervise-cyf/yxt-supervise-cyf-ui/src/views/supervise/EnterRegister/index.vue
@@ -29,7 +29,7 @@
         </div>
         <div class="item">
           <span class="item_text">入库日期：</span>
-          <el-date-picker v-model="formobj.warehousingDate" type="date" format="yyyy-MM-dd" class="item_input"
+          <el-date-picker v-model="formobj.warehousingDate" :picker-options="pickerOptions" type="date" format="yyyy-MM-dd" class="item_input"
             value-format="yyyy-MM-dd" placeholder="请选择" />
         </div>
         <div class="item">
@@ -99,7 +99,12 @@
           supplierSid: "",
           remarks: "",
           prodSid:''
-        }
+        },
+        pickerOptions:{
+          disabledDate(time){
+          return time.getTime()> Date.now();// 如果没有后面的-8.64e7就是不可以选择今天的
+          }
+      }
       }
     },
     created() {
diff --git a/yxt-supervise-cyf/yxt-supervise-cyf-ui/src/views/supervise/OutRegister/index.vue b/yxt-supervise-cyf/yxt-supervise-cyf-ui/src/views/supervise/OutRegister/index.vue
index a0b27fc3..97375dfd 100644
--- a/yxt-supervise-cyf/yxt-supervise-cyf-ui/src/views/supervise/OutRegister/index.vue
+++ b/yxt-supervise-cyf/yxt-supervise-cyf-ui/src/views/supervise/OutRegister/index.vue
@@ -1,13 +1,285 @@
 <template>
-  <div>成品出库登记</div>
+  <div>
+
+    <div class="tab-header webtop">
+      <!-- 标题 -->
+      <div>成品出库登记</div>
+      <!-- start 添加修改按钮 -->
+      <div>
+        <el-button type="primary" size="small" :disabled="submitdisabled" @click="saveOrUpdate">保存</el-button>
+        <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
+      </div>
+      <!-- end 添加修改按钮 -->
+      <!-- end 详情按钮 -->
+    </div>
+
+    <div class="listconadd">
+
+      <el-card class="box-card">
+        <div class="item">
+          <span class="item_text">销售合同号：</span>
+          <el-input v-model="formobj.salesContractNumber" placeholder="" class="item_input" clearable />
+        </div>
+        <div class="item">
+          <span class="item_text">签订日期：</span>
+          <el-date-picker v-model="formobj.contractSigningDate" :picker-options="pickerOptions" type="date" format="yyyy-MM-dd" class="item_input"
+            value-format="yyyy-MM-dd" placeholder="请选择" />
+        </div>
+        <div class="item">
+           <span class="item_text">品牌名称:</span>
+           <el-select v-model="prodSid" filterable  placeholder="请选择品牌名称" class="item_input" @change="getType" >
+             <el-option v-for="(item,i) in prodList" :key="i" :label="item.name" :value="item.sid" />
+           </el-select>
+         </div>
+         <div class="item">
+           <span class="item_text">商品名称:</span>
+           <el-select v-model="crudeSid" filterable  placeholder="请选择商品名称" class="item_input" @change="getTank" >
+             <el-option v-for="(item,i) in crudeList" :key="i" :label="item.name" :value="item.sid" />
+           </el-select>
+         </div>
+         <div class="item">
+           <span class="item_text">商品类别名称:</span>
+           <el-select v-model="formobj.prodSid" filterable  placeholder="请选择类别名称" class="item_input" @change="getList" >
+             <el-option v-for="(item,i) in ListList" :key="i" :label="item.name" :value="item.sid" />
+           </el-select>
+         </div>
+         <div class="item">
+          <span class="item_text">出库日期：</span>
+          <el-date-picker v-model="formobj.deliveryDate" type="date" :picker-options="pickerOptions" format="yyyy-MM-dd" class="item_input"
+            value-format="yyyy-MM-dd" placeholder="请选择" />
+        </div>
+        <div class="item">
+          <span class="item_text">净重：</span>
+          <el-input v-model="formobj.weight" placeholder="" class="item_input" clearable />
+        </div>
+        <div class="item">
+          <span class="item_text">价值：</span>
+          <el-input v-model="formobj.value" placeholder="" class="item_input" clearable />
+        </div>
+
+        <div class="item">
+          <span class="item_text">备注：</span>
+          <el-input v-model="formobj.remarks" placeholder="" class="item_input" clearable />
+        </div>
+      </el-card>
+
+    </div>
+
+  </div>
 </template>
 
 <script>
-export default {
+  import req from '@/api/baseInfo/becomeoil/index.js'
+  import req3 from '@/api/supplier/supplier'
+  import upload from '@/components/uploadFile/upload_yanchejianchaTuBiao'
+  export default {
+    components: {
+      upload
+    },
+    data() {
+      return {
+        submitdisabled: false,
+        supplierLists: [],
+        supplierList: [],
+        crudeLists: [],
+        crudeList: [],
+        prodLists: [],
+        prodList: [],
+        ListLists: [],
+        ListList: [],
+        crudeSid: "",
+        prodSid:'',
+        formobj: {
+          salesContractNumber: "",
+          contractSigningDate: "",
+          deliveryDate: "",
+          weight: "",
+          value: "",
+          remarks: "",
+          prodSid:''
+        },
+        pickerOptions:{
+          disabledDate(time){
+          return time.getTime()> Date.now();// 如果没有后面的-8.64e7就是不可以选择今天的
+          }
+      }
+      }
+    },
+    created() {
+      this.supplierInfoList()
+      this.last()
+    },
+    methods: {
+      supplierInfoList() {
+        req3.supplierList().then((res) => {
+          if (res.success) {
+            this.supplierLists = res.data
+            for (var i = 0; i < this.supplierLists.length; i++) {
+
+              let item = {
+                name: this.supplierLists[i].supplierName,
+                sid: this.supplierLists[i].sid,
+
+              }
+              this.supplierList.push(item)
+            }
+
+          }
+        })
+      },
+      last(){
+          req.selectList().then((response) => {
+            if (response.success) {
+             this.prodLists = response.data
+            for (var i = 0; i < this.prodLists.length; i++) {
+
+              let item = {
+                name: this.prodLists[i].name,
+                sid: this.prodLists[i].sid,
+              }
+              this.prodList.push(item)
+            }}
+          })
+        },
+        lastList(value){
+          req.selectInformationType(value).then((response) => {
+            if (response.success) {
+             this.crudeLists = response.data
+             this.crudeList = []
+             this.ListList = []
+            for (var i = 0; i < this.crudeLists.length; i++) {
+              let item = {
+                name: this.crudeLists[i].name,
+                sid: this.crudeLists[i].sid,
+
+              }
+              this.crudeList.push(item)
+            }}
+          })
+        },
+        handleList(value){
+          req.selectProductType(value).then((response) => {
+            if (response.success) {
+             this.ListLists = response.data
+             this.ListList = []
+            for (var i = 0; i < this.ListLists.length; i++) {
 
-}
+              let item = {
+                name: this.ListLists[i].name,
+                sid: this.ListLists[i].sid,
+
+              }
+              this.ListList.push(item)
+            }}
+          })
+        },
+      saveOrUpdate() {
+        req3.save(this.formobj)
+          .then(resp => {
+            if (resp.success) {
+              this.$message({
+                showClose: true,
+                type: 'success',
+                message: resp.msg
+              })
+              this.formobj = {
+                salesContractNumber: "",
+                contractSigningDate: "",
+                deliveryDate: "",
+                weight: "",
+                value: "",
+                remarks: "",
+                prodSid:''
+              }
+              this.crudeSid=''
+              this.prodSid=''
+            } else {
+              // 根据resp.code进行异常情况处理
+            }
+          })
+          .catch(() => {})
+
+      },
+      handleReturn() {
+        this.$store.dispatch('tagsView/delView', this.$route)
+        this.$router.go(-1)
+      },
+      getType(value) {
+        this.crudeSid=''
+        this.formobj.prodSid=''
+        this.lastList(value)
+      },
+      getTank(value) {
+        this.formobj.prodSid=''
+        this.handleList(value)
+      },
+      getList(value) {
+        this.formobj.prodSid = value
+      },
+    }
+  }
 </script>
+<style lang="scss">
+  .box-card {
+    margin-left: 60px;
+    margin-right: 60px;
+    min-width: 70%;
+    margin-top: 20px;
+    padding-bottom: 50px;
+
+    .item {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin-top: 15px;
+      height: 40px;
+      line-height: 40px;
+
+      .item_text {
+        flex: 0.8;
+        font-size: 18px;
+        text-align: right;
+      }
+
+      .item_input {
+        flex: 4;
+        font-size: 16px;
+        margin-left: 10px;
+        margin-right: 80px;
+      }
+
+      .item_left_input {
+        width: 20%;
+      }
+
+      .item_left_text {
+        height: 30px;
+        margin-left: 20px;
+        line-height: 30px;
+        color: #018AD2;
+        padding: 0px 15px;
+        border: 1.5px solid #018AD2;
+        border-radius: 5px;
+
+      }
+
+      .item_right {
+        flex: 1;
+        justify-items: center;
+
+        .item_right_list_text {
+          font-size: 16px;
+        }
+
+        .item_right_list_delect {
+          color: #5E94FF;
+          margin-left: 20px;
+          font-size: 16px;
+          text-decoration: underline;
+        }
+      }
 
-<style>
+    }
 
-</style>
\ No newline at end of file
+  }
+</style>