修改样式

jsowell-ui/src/views/order/order/index.vue

@@ -206,7 +206,7 @@
               </div>
               <div>开始时间：{{ item.chargeStartTime || "一" }}</div>
             </div>
-            <div style="padding: 10px">
+            <div class="conter">
               <el-descriptions
                 class="title"
                 :title="`${item.nickName || '---'}（${
@@ -217,23 +217,23 @@
                 <!-- @click.native="goMemberDetail(item)" -->
                 <el-descriptions-item label="站点名称">
                   <div style="color: #337ab7" @click="goStationDetail(item)">
-                    {{ item.stationName || "一" }}
+                    {{ item.stationName }}
                   </div>
                 </el-descriptions-item>
                 <el-descriptions-item label="实时充电度数"
-                  >{{ item.realTimeChargingDegree || "一" }}
+                  >{{ item.realTimeChargingDegree }}
                 </el-descriptions-item>
                 <el-descriptions-item label="实时消费金额"
-                  >{{ item.realTimeAmount || "一" }}
+                  >{{ item.realTimeAmount }}
                 </el-descriptions-item>
                 <el-descriptions-item label="起始SOC"
-                  >{{ item.startSoc || "一" }}
+                  >{{ item.startSoc }}
                 </el-descriptions-item>
                 <el-descriptions-item label="终止SOC"
-                  >{{ item.endSoc || "一" }}
+                  >{{ item.endSoc }}
                 </el-descriptions-item>
                 <el-descriptions-item label="结束充电时间"
-                  >{{ item.chargeEndTime || "一" }}
+                  >{{ item.chargeEndTime }}
                 </el-descriptions-item>
                 <el-descriptions-item label="启动方式"
                   >{{ startMode(item.startMode) }}
@@ -673,15 +673,16 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-::v-deep .el-descriptions--medium:not(.is-bordered) .el-descriptions-item__cell {
-  padding-bottom: 4px;
+.conter {
+  padding: 10px;
 }
-
-::v-deep .el-descriptions__header {
+::v-deep .conter .el-descriptions__header {
   margin-bottom: 10px;
   // color:#337ab7
 }
-
+::v-deep .conter .el-descriptions-item__cell {
+  padding-bottom: 4px;
+}
 .cardview-box {
   width: 100%;
   margin-bottom: 12px;

jsowell-ui/src/views/order/order/orderDetail.vue

@@ -1,41 +1,74 @@
 <template>
   <div class="app-container">
-    <el-card class="cardStyle" v-if="orderInfo[0].orderStatus === '4' || orderInfo[0].orderStatus === '2'">
+    <el-card
+      class="cardStyle"
+      v-if="orderInfo.orderStatus === '4' || orderInfo.orderStatus === '2'"
+    >
       <div style="margin: 10px">
-        <span style="color: #bf1c1c">该笔订单为异常状态，请检查充电桩状态！</span>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="dialogVisible = true">手动结算</el-button>
+        <span style="color: #bf1c1c"
+          >该笔订单为异常状态，请检查充电桩状态！</span
+        >
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="dialogVisible = true"
+          >手动结算</el-button
+        >
       </div>
 
-      <el-dialog
-        title="提示"
-        :visible.sync="dialogVisible"
-        width="35%"
-      >
-        <span>平台收到充电桩传来的最后一次实时监测数据<br/></span>
+      <el-dialog title="提示" :visible.sync="dialogVisible" width="35%">
+        <span>平台收到充电桩传来的最后一次实时监测数据<br /></span>
 
         <el-table style="width: 100%" :data="monitorDataList" border>
-          <el-table-column prop="dateTime" label="时间" align="center"/>
-          <el-table-column prop="chargingAmount" label="消费金额" align="center"/>
-          <el-table-column prop="chargingDegree" label="充电度数" align="center"/>
+          <el-table-column prop="dateTime" label="时间" align="center" />
+          <el-table-column
+            prop="chargingAmount"
+            label="消费金额"
+            align="center"
+          />
+          <el-table-column
+            prop="chargingDegree"
+            label="充电度数"
+            align="center"
+          />
         </el-table>
 
         <el-divider>下面可以输入自定义消费金额和充电度数</el-divider>
 
-        <div style="display:flex;justify-content:center;">
+        <div style="display: flex; justify-content: center">
           <el-form :model="manualSettlementParam">
-            <el-form-item label="消费金额:" prop="chargingAmount" label-width="80px">
-              <el-input-number v-model.number="manualSettlementParam.chargingAmount" :precision="2" :controls="false"
-                               style="width: 50%"/>
+            <el-form-item
+              label="消费金额:"
+              prop="chargingAmount"
+              label-width="80px"
+            >
+              <el-input-number
+                v-model.number="manualSettlementParam.chargingAmount"
+                :precision="2"
+                :controls="false"
+                style="width: 50%"
+              />
             </el-form-item>
-            <el-form-item label="充电度数:" prop="chargingDegree" label-width="80px">
-              <el-input-number v-model.number="manualSettlementParam.chargingDegree" :precision="2" :controls="false"
-                               style="width: 50%"/>
+            <el-form-item
+              label="充电度数:"
+              prop="chargingDegree"
+              label-width="80px"
+            >
+              <el-input-number
+                v-model.number="manualSettlementParam.chargingDegree"
+                :precision="2"
+                :controls="false"
+                style="width: 50%"
+              />
             </el-form-item>
           </el-form>
         </div>
         <span slot="footer" class="dialog-footer">
           <el-button @click="dialogVisible = false">取 消</el-button>
-          <el-button type="primary" @click="confirmManualSettlement">确 定</el-button>
+          <el-button type="primary" @click="confirmManualSettlement"
+            >确 定</el-button
+          >
         </span>
       </el-dialog>
     </el-card>
@@ -44,31 +77,25 @@
       <div style="margin: 30px">
         <div
           style="text-align: center; margin-bottom: 30px"
-          v-if="
-            orderInfo[0].orderStatus === '4' ||
-            orderInfo[0].orderStatus === '6'
-          "
+          v-if="orderInfo.orderStatus === '4' || orderInfo.orderStatus === '6'"
         >
           停止理由：
-          <span style="color: red">{{ orderInfo[0].stopReasonMsg }}</span>
+          <span style="color: red">{{ orderInfo.stopReasonMsg }}</span>
         </div>
         <el-steps
-          :active="orderInfo[0].orderStatus !== '6' ? 2 : 4"
+          :active="orderInfo.orderStatus !== '6' ? 2 : 4"
           align-center
           finish-status="success"
         >
           <el-step
             title="客户下单"
-            :description="orderInfo[0].createTime"
+            :description="orderInfo.createTime"
           ></el-step>
           <el-step
             title="开始充电"
-            :description="orderInfo[0].orderStatusDescribe"
-          ></el-step>
-          <el-step
-            title="结束充电"
-            :description="orderInfo[0].endTime"
+            :description="orderInfo.orderStatusDescribe"
           ></el-step>
+          <el-step title="结束充电" :description="orderInfo.endTime"></el-step>
           <el-step title="完成充电" description="充电时长"></el-step>
         </el-steps>
       </div>
@@ -77,99 +104,189 @@
     <!--  订单信息  -->
     <el-card class="cardStyle">
       <h3>订单信息</h3>
-      <el-table style="width: 100%" :data="orderInfo" border>
-        <el-table-column prop="orderCode" label="订单号" align="center" width="120"/>
-        <el-table-column prop="transactionCode" label="交易流水号" align="center" width="280"/>
-        <el-table-column prop="logicCard" label="卡号" align="center" width="80"/>
-        <el-table-column prop="orderStatusDescribe" label="订单状态描述" align="center" width="100"/>
-        <el-table-column prop="startTime" label="充电开始时间" align="center"/>
-        <el-table-column prop="endTime" label="充电结束时间" align="center"/>
-        <el-table-column prop="createTime" label="订单创建时间" align="center"/>
-        <el-table-column prop="settlementTime" label="订单结算时间" align="center"/>
-<!--        <el-table-column prop="settlementTime" label="订单结算金额" align="center"/>-->
-        <el-table-column prop="startSOC" label="起始SOC" align="center" width="80"/>
-        <el-table-column prop="endSOC" label="终止SOC" align="center" width="80"/>
-        <el-table-column prop="stopReasonMsg" label="订单停止原因" align="center" width="100"/>
-      </el-table>
+      <el-descriptions
+        direction="vertical"
+        :column="11"
+        border
+        :contentStyle="CS"
+        :label-style="LS"
+      >
+        <el-descriptions-item label="订单号">{{
+          orderInfo.orderCode
+        }}</el-descriptions-item>
+        <el-descriptions-item label="交易流水号">{{
+          orderInfo.transactionCode
+        }}</el-descriptions-item>
+        <el-descriptions-item label="卡号">{{
+          orderInfo.logicCard
+        }}</el-descriptions-item>
+        <el-descriptions-item label="订单状态描述">{{
+          orderInfo.orderStatusDescribe
+        }}</el-descriptions-item>
+        <el-descriptions-item label="充电开始时间">{{
+          orderInfo.startTime
+        }}</el-descriptions-item>
+        <el-descriptions-item label="充电结束时间">{{
+          orderInfo.endTime
+        }}</el-descriptions-item>
+        <el-descriptions-item label="订单创建时间">{{
+          orderInfo.createTime
+        }}</el-descriptions-item>
+        <el-descriptions-item label="订单结算时间">{{
+          orderInfo.settlementTime
+        }}</el-descriptions-item>
+
+        <el-descriptions-item label="起始SOC">{{
+          orderInfo.startSOC
+        }}</el-descriptions-item>
+        <el-descriptions-item label="终止SOC">{{
+          orderInfo.endSOC
+        }}</el-descriptions-item>
+        <el-descriptions-item label="订单停止原因">{{
+          orderInfo.stopReasonMsg
+        }}</el-descriptions-item>
+      </el-descriptions>
       <div class="marginTop"></div>
     </el-card>
 
     <el-card class="cardStyle">
       <h3>收费明细</h3>
-      <el-table :data="tableData" border show-summary :summary-method="getSummaries">
-        <el-table-column prop="periodType" label="时段类型" width="180" align="center"/>
-        <el-table-column prop="electricityPrice" label="电费单价(元/千瓦时)" align="center"/>
-        <el-table-column prop="servicePrice" label="服务费单价(元/千瓦时)" align="center"/>
-        <el-table-column prop="usedElectricity" label="用电量(千瓦时)" align="center"/>
-        <el-table-column prop="electricityAmount" label="电费金额(元)" align="center"/>
-        <el-table-column prop="serviceAmount" label="服务费金额(元)" align="center"/>
+      <el-table
+        :data="tableData"
+        border
+        show-summary
+        :summary-method="getSummaries"
+      >
+        <el-table-column
+          prop="periodType"
+          label="时段类型"
+          width="180"
+          align="center"
+        />
+        <el-table-column
+          prop="electricityPrice"
+          label="电费单价(元/千瓦时)"
+          align="center"
+        />
+        <el-table-column
+          prop="servicePrice"
+          label="服务费单价(元/千瓦时)"
+          align="center"
+        />
+        <el-table-column
+          prop="usedElectricity"
+          label="用电量(千瓦时)"
+          align="center"
+        />
+        <el-table-column
+          prop="electricityAmount"
+          label="电费金额(元)"
+          align="center"
+        />
+        <el-table-column
+          prop="serviceAmount"
+          label="服务费金额(元)"
+          align="center"
+        />
       </el-table>
       <div class="marginTop"></div>
     </el-card>
-
+    <!-- 实时订单数据 -->
     <el-card class="cardStyle">
       <h3>实时订单数据</h3>
-      <el-table style="width: 100%" :data="orderRealTimeInfo" border>
-        <el-table-column prop="orderAmount" label="消费金额" align="center" width="280">
-          <template slot-scope="scope">
-            <span>￥{{
-                scope.row.orderAmount === "0.0000" ? "0" : scope.row.orderAmount
-              }} </span>
-          </template>
-        </el-table-column>
-
-        <el-table-column prop="chargedDegree" label="充电度数" align="center">
-          <template slot-scope="scope">
-            <span>{{
-                scope.row.chargedDegree === "0.0000" ? "0" : scope.row.chargedDegree
-              }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="chargingTime" label="充电时长" align="center"/>
-        <el-table-column prop="soc" label="当前soc" align="center"/>
-      </el-table>
+      <el-descriptions
+        direction="vertical"
+        :column="5"
+        border
+        :contentStyle="CS"
+        :label-style="LS"
+      >
+        <el-descriptions-item label="时间">{{
+          orderRealTimeInfo.time
+        }}</el-descriptions-item>
+        <el-descriptions-item label="消费金额">{{
+          orderRealTimeInfo.orderAmount === "0.0000"
+            ? "0"
+            : orderRealTimeInfo.orderAmount
+        }}</el-descriptions-item>
+        <el-descriptions-item label="充电度数">{{
+          orderRealTimeInfo.chargedDegree === "0.0000"
+            ? "0"
+            : orderRealTimeInfo.chargedDegree
+        }}</el-descriptions-item>
+        <el-descriptions-item label="充电时长">{{
+          orderRealTimeInfo.chargingTime
+        }}</el-descriptions-item>
+        <el-descriptions-item label="当前soc">{{
+          orderRealTimeInfo.soc
+        }}</el-descriptions-item>
+      </el-descriptions>
       <div class="marginTop"></div>
     </el-card>
-
-    <!-- 支付信息-->
+    <!-- 支付信息 -->
     <el-card class="cardStyle">
       <h3>支付信息</h3>
-      <el-table style="width: 100%" :data="payDetail" border>
-        <el-table-column prop="payAmount" label="支付金额" align="center"/>
-        <el-table-column prop="payModeDesc" label="支付方式" align="center"/>
-        <el-table-column prop="payStatus" label="支付状态" align="center">
-          <template slot-scope="scope">
-            <span>{{
-                scope.row.payStatus === "1" ? "支付完成" : "待支付"
-              }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="payTime" label="支付时间" align="center"/>
-        <el-table-column prop="outTradeNo" label="支付流水号" align="center"/>
-        <el-table-column prop="refundAmount" label="退款金额" align="center"/>
-      </el-table>
+      <template v-if="payDetail.length !== 0">
+        <el-descriptions
+          direction="vertical"
+          :column="6"
+          border
+          :contentStyle="CS"
+          :label-style="LS"
+          v-for="(item, index) in payDetail"
+          :key="index"
+        >
+          <el-descriptions-item label="支付金额">{{
+            item.payAmount
+          }}</el-descriptions-item>
+          <el-descriptions-item label="支付方式">{{
+            item.payModeDesc
+          }}</el-descriptions-item>
+          <el-descriptions-item label="支付状态">{{
+            item.payStatus === "1" ? "支付完成" : "待支付"
+          }}</el-descriptions-item>
+          <el-descriptions-item label="支付时间">{{
+            item.payTime
+          }}</el-descriptions-item>
+          <el-descriptions-item label="支付流水号">{{
+            item.outTradeNo
+          }}</el-descriptions-item>
+          <el-descriptions-item label="退款金额">{{
+            item.refundAmount
+          }}</el-descriptions-item>
+        </el-descriptions>
+      </template>
+      <div v-else style="text-align: center">暂无数据</div>
       <div class="marginTop"></div>
     </el-card>
-
     <!--  退款信息  -->
     <el-card class="cardStyle">
       <div style="margin: 12px 0">
         <span>退款信息</span>
-        <el-button icon="el-icon-refresh-right"
-                   style="float: right; padding: 3px 0"
-                   type="text"
-                   @click="retryRefundOrder"
-                   v-if="retryRefundFlag"
+        <el-button
+          icon="el-icon-refresh-right"
+          style="float: right; padding: 3px 0"
+          type="text"
+          @click="retryRefundOrder"
+          v-if="retryRefundFlag"
         >
           重试退款
         </el-button>
       </div>
       <el-table style="width: 100%" :data="orderRefundInfoList" border>
-        <el-table-column prop="paymentId" label="支付流水号" align="center"/>
-        <el-table-column prop="reverseId" label="退款流水号" align="center"/>
-        <el-table-column prop="reverseAmt" label="退款金额" align="center"/>
-        <el-table-column prop="createdTime" label="退款申请时间" align="center"/>
-        <el-table-column prop="succeedTime" label="退款成功时间" align="center"/>
+        <el-table-column prop="paymentId" label="支付流水号" align="center" />
+        <el-table-column prop="reverseId" label="退款流水号" align="center" />
+        <el-table-column prop="reverseAmt" label="退款金额" align="center" />
+        <el-table-column
+          prop="createdTime"
+          label="退款申请时间"
+          align="center"
+        />
+        <el-table-column
+          prop="succeedTime"
+          label="退款成功时间"
+          align="center"
+        />
       </el-table>
       <div class="marginTop"></div>
     </el-card>
@@ -178,11 +295,27 @@
     <el-card class="cardStyle">
       <h3>设备信息</h3>
       <el-table style="width: 100%" :data="pileIn" border>
-        <el-table-column prop="merchantName" label="运营商名称" align="center"/>
-        <el-table-column prop="pileSn" label="设备编号" align="center"/>
-        <el-table-column prop="ratedCurrent" label="额定电流(A)" align="center"/>
-        <el-table-column prop="ratedVoltage" label="额定电压(V)" align="center"/>
-        <el-table-column prop="ratedPower" label="额定功率(KW)" align="center"/>
+        <el-table-column
+          prop="merchantName"
+          label="运营商名称"
+          align="center"
+        />
+        <el-table-column prop="pileSn" label="设备编号" align="center" />
+        <el-table-column
+          prop="ratedCurrent"
+          label="额定电流(A)"
+          align="center"
+        />
+        <el-table-column
+          prop="ratedVoltage"
+          label="额定电压(V)"
+          align="center"
+        />
+        <el-table-column
+          prop="ratedPower"
+          label="额定功率(KW)"
+          align="center"
+        />
       </el-table>
       <div class="marginTop"></div>
     </el-card>
@@ -194,27 +327,37 @@
         <el-table-column prop="nickName" label="用户昵称" align="center">
           <template slot-scope="scope">
             <router-link
-              :to="'/member/detail/index/'+scope.row.memberId"
+              :to="'/member/detail/index/' + scope.row.memberId"
               class="link-type"
             >
               <span>{{ scope.row.nickName }}</span>
             </router-link>
           </template>
         </el-table-column>
-        <el-table-column prop="memberId" label="会员ID" align="center"/>
-        <el-table-column prop="mobileNumber" label="用户手机号" align="center"/>
-        <el-table-column prop="principalBalance" label="本金金额" align="center"/>
+        <el-table-column prop="memberId" label="会员ID" align="center" />
+        <el-table-column
+          prop="mobileNumber"
+          label="用户手机号"
+          align="center"
+        />
+        <el-table-column
+          prop="principalBalance"
+          label="本金金额"
+          align="center"
+        />
         <!--        <el-table-column prop="giftBalance" label="赠送金额" align="center"/>-->
-        <el-table-column prop="totalAccountAmount" label="总金额" align="center"/>
+        <el-table-column
+          prop="totalAccountAmount"
+          label="总金额"
+          align="center"
+        />
       </el-table>
       <div class="marginTop"></div>
     </el-card>
     <!--    时间 描述-->
     <el-card
       class="cardStyle"
-      v-if="
-        orderInfo[0].orderStatus === '1' || orderInfo[0].orderStatus === '6'
-      "
+      v-if="orderInfo.orderStatus === '1' || orderInfo.orderStatus === '6'"
     >
       <div class="marginTop"></div>
       <order-echarts :obj="obj"></order-echarts>
@@ -222,16 +365,31 @@
   </div>
 </template>
 <script>
-import {getOrder, manualSettlementOrder, retryRefundOrder} from "@/api/order/order";
+import {
+  getOrder,
+  manualSettlementOrder,
+  retryRefundOrder,
+} from "@/api/order/order";
 import OrderEcharts from "@/views/order/order/orderEcharts";
 
 export default {
   name: "",
-  components: {OrderEcharts},
+  components: { OrderEcharts },
   data() {
     return {
+      CS: {
+        "text-align": "center",
+        "word-break": "break-all",
+      },
+      LS: {
+        height: "40px",
+        color: "#515A6E",
+        "text-align": "center",
+        "word-break": "break-all",
+        "font-weight": "bolder",
+      },
       orderCode: this.$route.params.orderCode,
-      orderInfo: [],
+      orderInfo: {},
       payDetail: [],
       // 订单退款列表
       orderRefundInfoList: [],
@@ -241,7 +399,12 @@ export default {
       obj: {},
       orderDetail: [],
       pileIn: [],
-      orderRealTimeInfo: null,
+      orderRealTimeInfo: {
+        orderAmount: null,
+        chargedDegree: null,
+        chargingTime: null,
+        soc: null,
+      },
       // 手动结算对话框Visible
       dialogVisible: false,
       // 最后一次实时监测数据
@@ -253,7 +416,7 @@ export default {
         chargingAmount: null,
         chargingDegree: null,
       },
-      tableData: []
+      tableData: [],
     };
   },
   created() {
@@ -261,15 +424,19 @@ export default {
   },
   methods: {
     getSummaries(param) {
-      const {columns, data} = param;
+      const { columns, data } = param;
       const sums = [];
       columns.forEach((column, index) => {
         if (index === 0) {
-          sums[index] = '合计';
+          sums[index] = "合计";
           return;
         }
-        const values = data.map(item => Number(item[column.property]));
-        if (column.property === 'usedElectricity' || column.property === 'electricityAmount' || column.property === 'serviceAmount') {
+        const values = data.map((item) => Number(item[column.property]));
+        if (
+          column.property === "usedElectricity" ||
+          column.property === "electricityAmount" ||
+          column.property === "serviceAmount"
+        ) {
           sums[index] = values.reduce((prev, curr) => {
             const value = Number(curr);
             if (!isNaN(value)) {
@@ -289,9 +456,9 @@ export default {
     // 重试退款方法
     retryRefundOrder() {
       const param = {
-        orderCode: this.orderCode
+        orderCode: this.orderCode,
       };
-      retryRefundOrder(param).then(response => {
+      retryRefundOrder(param).then((response) => {
         this.getOrderDetail();
       });
     },
@@ -302,27 +469,26 @@ export default {
       if (this.manualSettlementParam.chargingDegree == null) {
         return false;
       }
-      this.manualSettlementParam.orderCode = this.orderInfo[0].orderCode;
+      this.manualSettlementParam.orderCode = this.orderInfo.orderCode;
       console.log("确认手动结算订单param:", this.manualSettlementParam);
-      manualSettlementOrder(this.manualSettlementParam).then(response => {
+      manualSettlementOrder(this.manualSettlementParam).then((response) => {
         this.dialogVisible = false;
         this.getOrderDetail();
-      })
+      });
     },
     async getOrderDetail() {
-      const {data} = await getOrder(this.orderCode);
+      const { data } = await getOrder(this.orderCode);
+
       // console.log("getOrder", data);
       this.obj = data;
-      this.orderInfo = [data.orderInfo];
-      // console.log("this.orderInfo", this.orderDetail);
+      this.orderInfo = data.orderInfo;
       this.payDetail = data.payRecordList;
-      // console.log("this.payDetail", this.payDetail);
       this.orderRefundInfoList = data.orderRefundInfoList;
       this.userInfo = [data.memberInfo];
       // console.log("this.userInfo", this.userInfo);
       this.pileIn = [data.pileInfo];
       // console.log("this.pileIn", this.pileIn);
-      this.orderRealTimeInfo = [data.orderRealTimeInfo];
+      this.orderRealTimeInfo = data.orderRealTimeInfo;
       this.orderDetail = [data.billingDetails];
       this.tableData = data.chargeDetails;
       this.lastMonitorData = data.lastMonitorData;
@@ -339,28 +505,31 @@ export default {
       return [this.lastMonitorData];
     },
     retryRefundFlag() {
-      if (this.orderInfo[0] == null || this.orderInfo[0].orderStatus !== '6') {
+      if (this.orderInfo == null || this.orderInfo.orderStatus !== "6") {
         return false;
       }
-      if (this.payDetail[0] == null || this.payDetail[0].payMode !== '4') {
+      if (this.payDetail[0] == null || this.payDetail.payMode[0] !== "4") {
         return false;
       }
-      if (this.payDetail[0].refundAmount == null || this.payDetail[0].refundAmount <= 0.00 ) {
+      if (
+        this.payDetail[0].refundAmount == null ||
+        this.payDetail[0].refundAmount <= 0.0
+      ) {
         return false;
       }
       if (this.orderRefundInfoList.length === 0) {
         return false;
       }
       return true;
-    }
-  }
+    },
+  },
 };
 </script>
-<style>
+
+<style lang="scss" scoped>
 .cardStyle {
   margin-bottom: 10px;
 }
-
 .marginTop {
   margin-top: 10px;
 }