11

ruoyi-admin/src/main/java/com/ruoyi/web/controller/quote/QuoteController.java

@@ -25,12 +25,23 @@ import static com.ruoyi.common.utils.PageUtils.startPage;
  */
 @RestController
 @RequestMapping("/quote")
-@DataSource(DataSourceType.QUOT)
+
 public class QuoteController extends BaseController {
 
     @Autowired
     QuoteService quoteService;
 
+    /**
+     * @title queryMaterialListByParam
+     * @description 获取物料列表
+     * @author JIAL
+     * @param: precMaterialName
+     * @param: vagueMaterialName
+     * @param: vagueModel
+     * @updateTime 2024/3/11 10:56
+     * @return: com.ruoyi.common.core.page.TableDataInfo
+     */
+    @DataSource(DataSourceType.QUOT)
     @PostMapping("/materialList")
     public TableDataInfo queryMaterialListByParam(@RequestParam("precMaterialName") String precMaterialName,
                                                   @RequestParam("vagueMaterialName") String vagueMaterialName,
@@ -44,13 +55,48 @@ public class QuoteController extends BaseController {
         return getDataTable(materialDtos);
     }
 
+    /**
+     * @title queryRedBookPriceByParam
+     * @description 计算物料红本价格
+     * @author JIAL
+     * @param: params
+     * @updateTime 2024/3/11 10:56
+     */
+    @DataSource(DataSourceType.QUOT)
+    @PostMapping("/redBCost")
+    public AjaxResult queryRedBCostByParams(@RequestBody List<CalculateRBParamDto> params) {
+        List<CalculateRBParamDto> calculateRBParamDtoList = quoteService.queryRedBCostByParams(params);
+        logger.info("查询结果： {}", calculateRBParamDtoList);
+        return success(calculateRBParamDtoList);
+    }
+
+    /**
+     * @title queryRedBPriceByParams
+     * @description 获取红本价格
+     * @author JIAL
+     * @param: params
+     * @updateTime 2024/3/12 10:33
+     * @return: com.ruoyi.common.core.domain.AjaxResult
+     */
+    @DataSource(DataSourceType.QUOT)
     @PostMapping("/redBPrice")
-    public void queryRedBookPriceByParam(@RequestBody List<CalculateRBParamDto> params) {
+    public AjaxResult queryRedBPriceByParams(@RequestBody List<CalculateRBParamDto> params) {
-
+        List<CalculateRBParamDto> calculateRBParamDtoList = quoteService.queryRedBPriceByParams(params);
-        System.out.println(params.get(0).getModel());
+        logger.info("查询结果： {}", calculateRBParamDtoList);
-        System.out.println(params.get(0).getSpecification());
+        return success(calculateRBParamDtoList);
-        System.out.println(params.get(0).getVoltLevel());
+    }
 
+    /**
+     * @title queryRedBookVersion
+     * @description 获取红本版本号
+     * @author JIAL
+     * @updateTime 2024/3/11 11:24
+     * @return: com.ruoyi.common.core.domain.AjaxResult
+     */
+    @DataSource(DataSourceType.REDBOOK)
+    @PostMapping("/redBookVer")
+    public AjaxResult queryRedBookVersion() {
+        return success(quoteService.queryRedBookVer());
     }
 
 

ruoyi-system/src/main/java/com/ruoyi/quote/domain/CalculateRBParamDto.java

@@ -9,9 +9,48 @@ package com.ruoyi.quote.domain;
 public class CalculateRBParamDto {
     private String model;
     private String specification;
-
     private String voltLevel;
 
+    private String redBookVer;              //红本版本号
+
+    private String redBookPrice;            //红本价格
+
+    private String redBookCost;             //红本成本
+
+    private String rbFacPrice;              //红本厂价
+
+    public String getRedBookVer() {
+        return redBookVer;
+    }
+
+    public void setRedBookVer(String redBookVer) {
+        this.redBookVer = redBookVer;
+    }
+
+    public String getRedBookPrice() {
+        return redBookPrice;
+    }
+
+    public void setRedBookPrice(String redBookPrice) {
+        this.redBookPrice = redBookPrice;
+    }
+
+    public String getRedBookCost() {
+        return redBookCost;
+    }
+
+    public void setRedBookCost(String redBookCost) {
+        this.redBookCost = redBookCost;
+    }
+
+    public String getRbFacPrice() {
+        return rbFacPrice;
+    }
+
+    public void setRbFacPrice(String rbFacPrice) {
+        this.rbFacPrice = rbFacPrice;
+    }
+
     public String getVoltLevel() {
         return voltLevel;
     }

ruoyi-system/src/main/java/com/ruoyi/quote/domain/MaterialDto.java

@@ -25,6 +25,14 @@ public class MaterialDto extends BaseEntity {
 
     private double redBookCost = 0;             //红本成本
 
+    private double rbFacPrice = 0;              //红本厂价
+
+    private String manuCost;                //制造成本
+
+    private String wdFSurcharge;            //盘具点数
+
+    private Integer number = 1;
+
     public double getMatCostPrice() {
         return matCostPrice;
     }
@@ -57,14 +65,6 @@ public class MaterialDto extends BaseEntity {
         this.rbFacPrice = rbFacPrice;
     }
 
-    private double rbFacPrice = 0;              //红本厂价
-
-    private String manuCost;                //制造成本
-
-    private String wdFSurcharge;            //盘具点数
-
-    private Integer number = 1;
-
     public Integer getNumber() {
         return number;
     }

ruoyi-system/src/main/java/com/ruoyi/quote/mapper/QuoteMapper.java

@@ -1,5 +1,6 @@
 package com.ruoyi.quote.mapper;
 
+import com.ruoyi.quote.domain.CalculateRBParamDto;
 import com.ruoyi.quote.domain.MaterialDto;
 import org.apache.ibatis.annotations.Mapper;
 import org.apache.ibatis.annotations.Param;
@@ -18,4 +19,10 @@ public interface QuoteMapper {
     List<MaterialDto> selectMaterialListByParam(@Param("precMaterialName") String precMaterialName,
                                                @Param("vagueMaterialName")String vagueMaterialName,
                                                @Param("vagueModel") String vagueModel);
+
+    List<CalculateRBParamDto> queryRedBCostByParams(@Param("params") List<CalculateRBParamDto> params);
+
+    List<CalculateRBParamDto> queryRedBPriceByParams(@Param("params") List<CalculateRBParamDto> params);
+
+    String queryRedBookVer();
 }

ruoyi-system/src/main/java/com/ruoyi/quote/service/QuoteService.java

@@ -1,5 +1,6 @@
 package com.ruoyi.quote.service;
 
+import com.ruoyi.quote.domain.CalculateRBParamDto;
 import com.ruoyi.quote.domain.MaterialDto;
 
 import java.util.List;
@@ -13,4 +14,10 @@ import java.util.List;
  */
 public interface QuoteService {
     List<MaterialDto> queryMaterialListByParam(String precMaterialName, String vagueMaterialName, String vagueModel);
+
+    List<CalculateRBParamDto> queryRedBCostByParams(List<CalculateRBParamDto> params);
+
+    List<CalculateRBParamDto> queryRedBPriceByParams(List<CalculateRBParamDto> params);
+
+    String queryRedBookVer();
 }

ruoyi-system/src/main/java/com/ruoyi/quote/service/impl/QuoteServiceImpl.java

@@ -1,5 +1,6 @@
 package com.ruoyi.quote.service.impl;
 
+import com.ruoyi.quote.domain.CalculateRBParamDto;
 import com.ruoyi.quote.domain.MaterialDto;
 import com.ruoyi.quote.mapper.QuoteMapper;
 import com.ruoyi.quote.service.QuoteService;
@@ -31,7 +32,47 @@ public class QuoteServiceImpl implements QuoteService {
      * @updateTime 2024/3/5 16:16
      * @return: java.util.List<com.ruoyi.quote.domain.MaterialDto>
      */
+    @Override
     public List<MaterialDto> queryMaterialListByParam(String precMaterialName, String vagueMaterialName, String vagueModel) {
         return quoteMapper.selectMaterialListByParam(precMaterialName, vagueMaterialName, vagueModel);
     }
+
+    /**
+     * @title queryCostPriceByParams
+     * @description 查红本成本
+     * @author JIAL
+     * @param: params
+     * @updateTime 2024/3/11 9:44
+     * @return: java.util.List<com.ruoyi.quote.domain.CalculateRBParamDto>
+     */
+    @Override
+    public List<CalculateRBParamDto> queryRedBCostByParams(List<CalculateRBParamDto> params) {
+        return quoteMapper.queryRedBCostByParams(params);
+    }
+
+    /**
+     * @title queryRedBPriceByParams
+     * @description 获取红本价
+     * @author JIAL
+     * @param: params
+     * @updateTime 2024/3/12 10:32
+     * @return: java.util.List<com.ruoyi.quote.domain.CalculateRBParamDto>
+     */
+    @Override
+    public List<CalculateRBParamDto> queryRedBPriceByParams(List<CalculateRBParamDto> params) {
+        return quoteMapper.queryRedBPriceByParams(params);
+    }
+
+
+    /**
+     * @title queryRedBookVer
+     * @description 获取红本价最新版本
+     * @author JIAL
+     * @updateTime 2024/3/11 11:13
+     * @return: java.lang.String
+     */
+    @Override
+    public String queryRedBookVer() {
+        return quoteMapper.queryRedBookVer();
+    }
 }

ruoyi-system/src/main/resources/mapper/quote/QuoteMapper.xml

@@ -19,7 +19,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
         <result property="redBookCost"    column="redBookCost"    />
     </resultMap>
 
-    <select id="selectMaterialListByParam" resultType="com.ruoyi.quote.domain.MaterialDto">
+    <!--<select id="selectMaterialListByParam" resultType="com.ruoyi.quote.domain.MaterialDto">
         select a.material_id AS uid,a.material_xingh AS model,a.material_guig AS specification,
                a.material_diany AS voltLevel,a.material_dw AS measureUnit,c.type_name As prodCategory,
                b.price matCostPrice, d.factory_total_ratio/100 manuCost,d.factory_pj_ratio/100 wdFSurcharge
@@ -39,6 +39,73 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
 
         </where>
 
+    </select>-->
+
+    <select id="selectMaterialListByParam" resultType="com.ruoyi.quote.domain.MaterialDto">
+        select a.material_id AS uid, a.material_xingh AS model,a.material_guig AS specification,a.material_diany AS voltLevel,
+        a.material_dw AS measureUnit,c.type_name AS prodCategory,
+        b.price matCostPrice, d.factory_total_ratio/100 manuCost,d.factory_pj_ratio/100 wdFSurcharge,
+        cc.红本价格 AS redBookPrice,cc.红本价格*0.8 rbFacPrice, dd.成本价格 AS redBookCost
+        from c_material a
+        left join
+        (select a.cost_material_id,sum((isnull(a.cost_cl_qty,0)+isnull(a.cost_cl_qty_2,0))*b.material_price) price from c_material_cost a
+        left join c_yl_material b on a.cost_cl_id=b.material_no
+        where b.material_state='0'
+        group by a.cost_material_id
+        )b on a.material_id=b.cost_material_id
+        left join c_material_type_factory c on a.material_type_id = c.type_no
+        left join c_material_type e on e.type_no = c.type_no
+        left join c_factory d on d.factory_no = c.factory_id
+        left join(select 型号,规格,电压等级,红本价格 from temp_price
+        where version_uid_0 = 804
+        )as cc on cc.型号=a.material_xingh and cc.规格 = a.material_guig
+        and  cc.电压等级 = a.material_diany
+        left join(select 型号,规格,电压等级,成本价格 from temp_base_price
+        where  version_uid_0 = 804
+        )as dd on dd.型号=a.material_xingh and dd.规格 = a.material_guig
+        and  dd.电压等级= a.material_diany
+        <where>
+            a.material_state='0' and e.type_state ='0'
+            <if test="precMaterialName != null  and precMaterialName != ''"> and a.material_xingh like concat('', #{precMaterialName}, '%')</if>
+            <if test="vagueMaterialName != null  and vagueMaterialName != ''"> and a.material_xingh like concat('%', #{vagueMaterialName}, '%')</if>
+            <if test="vagueModel != null  and vagueModel != ''"> and a.material_guig like concat('%', #{vagueModel}, '%')</if>
+        </where>
+        ORDER BY a.material_id
+
+    </select>
+
+    <select id="queryRedBCostByParams" resultType="com.ruoyi.quote.domain.CalculateRBParamDto">
+        SELECT a.成本价格 AS redBookCost, a.型号 AS model, a.规格 AS specification, a.电压等级 AS voltLevel
+        FROM [REDBOOK].[RedBook].[dbo].rb_productbase_price a
+        JOIN (VALUES
+        <foreach collection="params" item="param" open="(" separator="),(" close=")">
+            #{param.redBookVer}, #{param.model}, #{param.specification}, #{param.voltLevel}
+        </foreach>
+        ) AS v(version_uid_0, 型号, 规格, 电压等级)
+        ON a.version_uid_0 = v.version_uid_0
+        AND a.型号 = v.型号
+        AND a.规格 = v.规格
+        AND a.电压等级 = v.电压等级;
+    </select>
+
+    <select id="queryRedBPriceByParams" resultType="com.ruoyi.quote.domain.CalculateRBParamDto">
+        select a.红本价格 AS redBookPrice, a.型号 AS model, a.规格 AS specification, a.电压等级 AS voltLevel
+        from [REDBOOK].[RedBook].[dbo].rb_product_price  a
+        JOIN (VALUES
+        <foreach collection="params" item="param" open="(" separator="),(" close=")">
+            #{param.redBookVer}, #{param.model}, #{param.specification}, #{param.voltLevel}
+        </foreach>
+        ) AS v(version_uid_0, 型号, 规格, 电压等级)
+        ON a.version_uid_0 = v.version_uid_0
+        AND a.型号 = v.型号
+        AND a.规格 = v.规格
+        AND a.电压等级 = v.电压等级;
+    </select>
+
+    <select id="queryRedBookVer" resultType="String">
+        SELECT MAX([uid_0]) AS redBookVer
+        FROM [RedBook].[dbo].[rb_productVersion]
+        WHERE [sta_0] IN ('0', '1');
     </select>
 
 </mapper>

ruoyi-ui/src/api/quote/quote.js

@@ -8,10 +8,25 @@ export function queryMaterialListByParam(query) {
   })
 }
 
-export function queryRedBookPriceByParam (query) {
+export function queryRedBCostByParams (query) {
+  return request({
+    url: '/quote/redBCost',
+    method: 'post',
+    data: query
+  })
+}
+
+export function queryRedBPriceByParams (query) {
   return request({
     url: '/quote/redBPrice',
     method: 'post',
     data: query
   })
 }
+
+export function queryRedBookVer () {
+  return request({
+    url: '/quote/redBookVer',
+    method: 'post',
+  })
+}

ruoyi-ui/src/views/quotePage/quote/index.vue

@@ -274,8 +274,8 @@
       <!-- 添加物料和计算数据的按钮div -->
       <div class="button-box">
         <el-button type="text" @click="addMaterial">添加物料</el-button>
-        <el-button type="text" @click="calculateRedBookPrice">计算红本价格</el-button>
+<!--        <el-button type="text" @click="calculateRedBookPrice">计算红本价格</el-button>-->
-        <el-button type="text" >计算数据</el-button>
+        <el-button type="text" @click="calculatedData">计算数据</el-button>
       </div>
       <!-- 物料表格控件 -->
       <div class="table-box">
@@ -381,7 +381,7 @@
             prop="wdFSurcharge"
             label="盘具运费">
             <template slot-scope="scope">
-              {{ (parseFloat(scope.row.wdFSurcharge) * 100).toFixed(2) + '%' }}
+              {{ parseFloat(scope.row.wdFSurcharge).toFixed(2) + '%' }}
             </template>
           </el-table-column>
           <el-table-column
@@ -515,11 +515,12 @@
 </template>
 
 <script>
-import {queryMaterialListByParam, queryRedBookPriceByParam } from "@/api/quote/quote";
+import {queryMaterialListByParam, queryRedBCostByParams, queryRedBPriceByParams, queryRedBookVer } from "@/api/quote/quote";
 const commonRule = [
   { required: true, message: '不能为空值，可填0', trigger: 'blur' },
   { pattern: /^(([1-9]{1}\d{0,9})|(0{1}))(\.\d{1,3})?$/, message: '格式有误，只能为数字格式', trigger: 'blur' }
 ];
+let redBookVer = 0;     //红本版本号
 
 export default {
   name: "index-app",
@@ -609,7 +610,8 @@ export default {
 
   },
   created() {
-
+    this.getRedBookVersion();
+    this.calculateTotal();
   },
 
   mounted() {
@@ -618,6 +620,13 @@ export default {
   methods: {
     async init () {
 
+    },
+    /**-------------获取红本版本号---------------**/
+    getRedBookVersion() {
+      queryRedBookVer().then(response => {
+        console.log(response);
+        redBookVer = response.msg
+      });
     },
     /**--------------输入值改变则底色发生变化------------**/
     validateAndSetDefault(formLabelAlign, field) {
@@ -667,6 +676,7 @@ export default {
         this.loading = false;
       });
     },
+    /**-----------选择物料触发事件----------------**/
     handleSelectionChange(selection) {
       selection.forEach(item => {
         // 判断是否已经存在于已选列表中，避免重复添加
@@ -677,6 +687,7 @@ export default {
       });
 
     },
+    /**-------------------删除物料dialog删除已选---------------------**/
     removeSelectedItem(selectedItem) {
       // 判断当前数据是否被选择
       const isSelected = this.$refs.materialDialogData.selection.includes(selectedItem);
@@ -703,7 +714,7 @@ export default {
       this.$refs.materialDialogData.clearSelection();
       this.dialogMaterialVisible = false;
     },
-
+    /**---------------关闭选择物料弹出框--------------------**/
     closeMaterialDialog() {
       this.dialogMaterialVisible = false;
     },
@@ -712,18 +723,140 @@ export default {
       const param = this.materialData.map(item => ({
         model: item.model,
         specification: item.specification,
-        voltLevel: item.voltLevel
+        voltLevel: item.voltLevel,
+        redBookVer: redBookVer
       }));
-
+      queryRedBCostByParams(param).then(response => {
-      queryRedBookPriceByParam(param).then(response => {
+        for (let i = 0; i < this.materialData.length; i++) {
+          for (let j = 0; j < response.data.length; j++) {
+            // 检查型号、规格、电压等级是否相等
+            if (
+              this.materialData[i].model === response.data[j].model &&
+              this.materialData[i].specification === response.data[j].specification &&
+              this.materialData[i].voltLevel === response.data[j].voltLevel
+            ) {
+              // 将返回数据的 redBookCost 赋值给表格数据的对应行的 redBookCost
+              this.materialData[i].redBookCost = response.data[j].redBookCost;
+            }
+          }
+        }
+      });
+      queryRedBPriceByParams(param).then(response => {
+        for (let i = 0; i < this.materialData.length; i++) {
+          for (let j = 0; j < response.data.length; j++) {
+            // 检查型号、规格、电压等级是否相等
+            if (
+              this.materialData[i].model === response.data[j].model &&
+              this.materialData[i].specification === response.data[j].specification &&
+              this.materialData[i].voltLevel === response.data[j].voltLevel
+            ) {
+              // 将返回数据的 redBookCost 赋值给表格数据的对应行的 redBookCost
+              this.materialData[i].redBookPrice = response.data[j].redBookPrice;
+              this.materialData[i].rbFacPrice = response.data[j].rbFacPrice;
+            }
+          }
+        }
+      });
+    },
+    /**---------------计算财务点数总和--------------------**/
+    calculateTotal() {
+      this.totalForm.totalFinExpenses =parseFloat(
+        (
+          parseFloat(this.formLabelAlign.officeExpense.value || '0') +
+          parseFloat(this.formLabelAlign.travelExpense.value || '0') +
+          parseFloat(this.formLabelAlign.salaryInsur.value || '0') +
+          parseFloat(this.formLabelAlign.otherMgmtExpense.value || '0') +
+          parseFloat(this.formLabelAlign.carExpense.value || '0') +
+          parseFloat(this.formLabelAlign.mgmtBizEntFee.value || '0') +
+          parseFloat(this.formLabelAlign.mgmtDeprecExpense.value || '0') +
+          parseFloat(this.formLabelAlign.consultAuditFee.value || '0') +
+          parseFloat(this.formLabelAlign.tenderCost.value || '0') +
+          parseFloat(this.formLabelAlign.rentExpense.value || '0') +
+          parseFloat(this.formLabelAlign.salary.value || '0') +
+          parseFloat(this.formLabelAlign.inspectFee.value || '0') +
+          parseFloat(this.formLabelAlign.transTravelExpense.value || '0') +
+          parseFloat(this.formLabelAlign.otherSalesExpense.value || '0') +
+          parseFloat(this.formLabelAlign.biddingCost.value || '0') +
+          parseFloat(this.formLabelAlign.bizFee.value || '0') +
+          parseFloat(this.formLabelAlign.salesBizEntFee.value || '0') +
+          parseFloat(this.formLabelAlign.transpHandlingFee.value || '0') +
+          parseFloat(this.formLabelAlign.manufDeprecExpense.value || '0') +
+          parseFloat(this.formLabelAlign.interestExpense.value || '0') +
+          parseFloat(this.formLabelAlign.handlingFee.value || '0') +
+          parseFloat(this.formLabelAlign.discInterest.value || '0') +
+          parseFloat(this.formLabelAlign.otherFinExpenses.value || '0') +
+          parseFloat(this.formLabelAlign.invOpCost.value || '0') +
+          parseFloat(this.formLabelAlign.tax.value || '0')
+        ).toFixed(4))
+      console.log(parseFloat(this.formLabelAlign.officeExpense || '0') )
+    },
+    /**----------------计算数据--------------------**/
+    calculatedData() {
+      /**-------------计算财务总成本---------------**/
+      this.calculateTotal();
+      /**----------------------进行盘具、数量、人工、水电三个数值的验证---------------**/
+      this.validationErrors = []; // 清空之前的错误信息
+      this.materialData.forEach((row, index) => {
+        const quantity = parseFloat(row.number) || 0; // 如果为空，默认为0
+        // 进行数量验证
+        if (isNaN(quantity) || quantity < 0) {
+          this.validationErrors.push(`第 ${index + 1} 行数量不符合要求\n`);
+        }
 
       });
-    }
+
+      /**-----------------------验证完成进行运算，验证结果通过才进行计算--------------------------**/
+      if (this.validationErrors.length === 0) {
+        // 遍历表格数据进行计算
+        this.materialData.forEach((row, index) => {
+          this.validationErrors = []; // 清空之前的错误信息
+
+          const redBookFacPrice = parseFloat(row.rbFacPrice);
+          const materialCost = parseFloat(row.matCostPrice);
+          const wdFSurcharge = parseFloat(row.wdFSurcharge) || 0; // 如果为空，默认为0
+          const manuCost = parseFloat(row.manuCost) || 0; // 如果为空，默认为0
+          const quantity = parseFloat(row.number) || 0; // 如果为空，默认为0
+          const totalFinExpenses = (parseFloat(this.totalForm.totalFinExpenses)) / 100
+          const num1 = (quantity * redBookFacPrice);
+          const num2 = ((materialCost + materialCost * (manuCost  + wdFSurcharge + totalFinExpenses ) ) * quantity)
+          // 进行其他计算
+          this.$set(this.materialData, index, {
+            ...row,
+            varRatio: ((redBookFacPrice - materialCost) / redBookFacPrice * 100).toFixed(2) + '%',
+            totalFacPrice: (quantity * redBookFacPrice).toFixed(2),
+            totalCost: ((materialCost + materialCost * (manuCost  + wdFSurcharge + totalFinExpenses) ) * quantity
+            ).toFixed(2),
+            totalVariance : (((num1 - num2) / num1) * 100).toFixed(2) + '%'
+          });
+        });
+      } else {
+        this.$message({
+          type: 'error',
+          dangerouslyUseHTMLString: true,
+          message: this.validationErrors.join('<br>')
+        });
+      }
+
+      // 计算厂价金额合计
+      const totalFactoryAmount = this.materialData.reduce((sum, row) => sum + parseFloat(row.totalFacPrice), 0);
+      this.totalForm.totalFactoryAmount = totalFactoryAmount.toFixed(2);
+
+      // 计算实际金额合计
+      const totalCost = this.materialData.reduce((sum, row) => sum + parseFloat(row.totalCost), 0);
+      this.totalForm.totalActualAmount = totalCost.toFixed(2);
+
+      const totalDifferenceValue = (((totalFactoryAmount - totalCost) / totalFactoryAmount) * 100)
+      this.totalForm.totalDifferenceValue = totalDifferenceValue.toFixed(2)
+    },
   },
 }
 </script>
 
 <style scoped lang="scss">
+.container {
+  margin-bottom: 30px;
+}
+
 .center-container {
   width: 100%;
 }