|
|
@@ -0,0 +1,456 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container organization-index">
|
|
|
+ <div class="title-container">
|
|
|
+ <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
|
|
|
+ </div>
|
|
|
+ <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card" style="margin-top: 10px;">
|
|
|
+ <el-tab-pane label="资产业务" name="ASSET_BUSINESS">
|
|
|
+ <y-page-list-layout :page-list="pageData" :page-para="queryDTO" :get-page-list="page">
|
|
|
+ <template slot="left">
|
|
|
+ <el-input v-model="queryDTO.keyWord" placeholder="关键字(项⽬编号或产品号)" clearable style="width: 300px;float: left;"></el-input>
|
|
|
+ <el-input v-model="queryDTO.invoiceNo" placeholder="发票号" clearable style="margin-left: 20px;width: 300px;float: left;"></el-input>
|
|
|
+ <el-input v-model="queryDTO.clientManagerName" placeholder="客户经理" clearable style="margin-left: 20px;width: 300px;float: left;"></el-input>
|
|
|
+ <el-select v-model="queryDTO.status" filterable placeholder="是否确认" clearable style="margin-left: 20px;width: 300px;float: left;">
|
|
|
+ <el-option label="已确认" value="true"></el-option>
|
|
|
+ <el-option label="未确认" value="false"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="findDate"
|
|
|
+ type="daterange"
|
|
|
+ align="center"
|
|
|
+ unlink-panels
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="罚款⽇期（开始）"
|
|
|
+ end-placeholder="罚款⽇期（结束）"
|
|
|
+ :picker-options="pickerOptions"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ style="margin-left: 20px;width: 300px;float: left;"
|
|
|
+ ></el-date-picker>
|
|
|
+ <el-button class="filter-item" style="margin-left:20px;float: left;" type="primary" @click="page()" round>搜索</el-button>
|
|
|
+ <el-button class="filter-item" style="float: left;" round type="success" @click="resetSearch()">重置</el-button>
|
|
|
+ </template>
|
|
|
+ <parentTable ref="table" v-loading="listLoading" :data="pageData.records" slot="table" style="width: 100%;">
|
|
|
+ <el-table-column label="项⽬编号" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.orderId }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="项⽬名称" align="center" width="250">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.orderName}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="产品号" align="center" width="250">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.productionNo}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="产品类型" align="center" width="250">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.productionType === 'REPORT' ? '评估报告' : row.productionType === 'CONSULT' ? '咨询报告' : row.productionType === 'LETTER' ? '意见函' : '未知' }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="发票号" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.invoiceNo }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="应收⾦额" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.shouldAmount }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="标准收费" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.standardAmount }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="客户经理" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.clientManagerName}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="超期天数" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.overdueDay}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="客户名称" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.customerName }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="业务来源" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.customerSubName }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="委托方" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.bailor}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="罚款⾦额" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.fineAmount }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="实际罚款⾦额" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.realFineAmount }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="是否确认" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.status ? '已确认' : '未确认' }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="罚款⽇期" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.punishDate }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="客户经理情况说明" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.explain }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" align="center" width="100" fixed="right">
|
|
|
+ <template slot-scope="{row}"></template>
|
|
|
+ </el-table-column>
|
|
|
+ </parentTable>
|
|
|
+ </y-page-list-layout>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="大中型业务" name="MAJOR_BUSINESS">
|
|
|
+ <y-page-list-layout :page-list="pageData" :page-para="queryDTO" :get-page-list="page">
|
|
|
+ <template slot="left">
|
|
|
+ <el-input v-model="queryDTO.keyWord" placeholder="关键字(项⽬编号或产品号)" clearable style="width: 300px;float: left;"></el-input>
|
|
|
+ <el-input v-model="queryDTO.invoiceNo" placeholder="发票号" clearable style="margin-left: 20px;width: 300px;float: left;"></el-input>
|
|
|
+ <el-input v-model="queryDTO.clientManagerName" placeholder="客户经理" clearable style="margin-left: 20px;width: 300px;float: left;"></el-input>
|
|
|
+ <el-select v-model="queryDTO.status" filterable placeholder="是否确认" clearable style="margin-left: 20px;width: 300px;float: left;">
|
|
|
+ <el-option label="已确认" value="true"></el-option>
|
|
|
+ <el-option label="未确认" value="false"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="findDate"
|
|
|
+ type="daterange"
|
|
|
+ align="center"
|
|
|
+ unlink-panels
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="罚款⽇期（开始）"
|
|
|
+ end-placeholder="罚款⽇期（结束）"
|
|
|
+ :picker-options="pickerOptions"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ style="margin-left: 20px;width: 300px;float: left;"
|
|
|
+ ></el-date-picker>
|
|
|
+ <el-button class="filter-item" style="margin-left:20px;float: left;" type="primary" @click="page()" round>搜索</el-button>
|
|
|
+ <el-button class="filter-item" style="float: left;" round type="success" @click="resetSearch()">重置</el-button>
|
|
|
+ </template>
|
|
|
+ <parentTable ref="table" v-loading="listLoading" :data="pageData.records" slot="table" style="width: 100%;">
|
|
|
+ <el-table-column label="项⽬编号" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.orderId }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="项⽬名称" align="center" width="250">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.orderName}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="产品号" align="center" width="250">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.productionNo}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="产品类型" align="center" width="250">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.productionType === 'REPORT' ? '评估报告' : row.productionType === 'CONSULT' ? '咨询报告' : row.productionType === 'LETTER' ? '意见函' : '未知' }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="发票号" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.invoiceNo }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="应收⾦额" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.shouldAmount }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="标准收费" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.standardAmount }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="客户经理" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.clientManagerName}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="超期天数" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.overdueDay}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="客户名称" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.customerName }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="业务来源" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.customerSubName }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="委托方" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.bailor}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="罚款⾦额" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.fineAmount }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="实际罚款⾦额" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.realFineAmount }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="是否确认" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.status ? '已确认' : '未确认' }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="罚款⽇期" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.punishDate }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="客户经理情况说明" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.explain }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" align="center" width="100" fixed="right">
|
|
|
+ <template slot-scope="{row}"></template>
|
|
|
+ </el-table-column>
|
|
|
+ </parentTable>
|
|
|
+ </y-page-list-layout>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="个贷业务" name="PERSONAL_BUSINESS">
|
|
|
+ <y-page-list-layout :page-list="pageData" :page-para="queryDTO" :get-page-list="page">
|
|
|
+ <template slot="left">
|
|
|
+ <el-input v-model="queryDTO.keyWord" placeholder="关键字(项⽬编号)" clearable style="width: 300px;float: left;"></el-input>
|
|
|
+ <el-input v-model="queryDTO.invoiceNo" placeholder="发票号" clearable style="margin-left: 20px;width: 300px;float: left;"></el-input>
|
|
|
+ <el-input v-model="queryDTO.clientManagerName" placeholder="客户经理" clearable style="margin-left: 20px;width: 300px;float: left;"></el-input>
|
|
|
+ <el-select v-model="queryDTO.status" filterable placeholder="是否确认" clearable style="margin-left: 20px;width: 300px;float: left;">
|
|
|
+ <el-option label="已确认" value="true"></el-option>
|
|
|
+ <el-option label="未确认" value="false"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="findDate"
|
|
|
+ type="daterange"
|
|
|
+ align="center"
|
|
|
+ unlink-panels
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="罚款⽇期（开始）"
|
|
|
+ end-placeholder="罚款⽇期（结束）"
|
|
|
+ :picker-options="pickerOptions"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ style="margin-left: 20px;width: 300px;float: left;"
|
|
|
+ ></el-date-picker>
|
|
|
+ <el-button class="filter-item" style="margin-left:20px;float: left;" type="primary" @click="page()" round>搜索</el-button>
|
|
|
+ <el-button class="filter-item" style="float: left;" round type="success" @click="resetSearch()">重置</el-button>
|
|
|
+ </template>
|
|
|
+ <parentTable ref="table" v-loading="listLoading" :data="pageData.records" slot="table" style="width: 100%;">
|
|
|
+ <el-table-column label="项⽬编号" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.orderId }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="项⽬名称" align="center" width="250">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.orderName}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="发票号" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.invoiceNo }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="应收⾦额" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.shouldAmount }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="客户经理" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.clientManagerName}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="超期天数" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.overdueDay}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="客户名称" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.customerName }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="业务来源" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.customerSubName }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="委托方" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.bailor}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="罚款⾦额" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.fineAmount }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="实际罚款⾦额" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.realFineAmount }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="是否确认" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.status ? '已确认' : '未确认' }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="罚款⽇期" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.punishDate }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="客户经理情况说明" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.explain }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" align="center" width="100" fixed="right">
|
|
|
+ <template slot-scope="{row}"></template>
|
|
|
+ </el-table-column>
|
|
|
+ </parentTable>
|
|
|
+ </y-page-list-layout>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import Breadcrumb from '@/components/Breadcrumb';
|
|
|
+import YPageListLayout from '@/components/YPageListLayout';
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'fine',
|
|
|
+ components: {
|
|
|
+ Breadcrumb,
|
|
|
+ YPageListLayout,
|
|
|
+ },
|
|
|
+
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ activeName: 'ASSET_BUSINESS',
|
|
|
+ listLoading: true,
|
|
|
+ findDate: null,
|
|
|
+ // 分页查询条件
|
|
|
+ queryDTO: {
|
|
|
+ page: 1,
|
|
|
+ size: 10,
|
|
|
+ businessType: 'ASSET_BUSINESS',
|
|
|
+ keyWord: null,
|
|
|
+ invoiceNo: null,
|
|
|
+ clientManagerName: null,
|
|
|
+ status: null,
|
|
|
+ startPunishDate: null,
|
|
|
+ endPunishDate: null,
|
|
|
+ },
|
|
|
+ pageData: {records :[]},
|
|
|
+ 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]);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.page();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleClick() {
|
|
|
+ this.queryDTO = {
|
|
|
+ page: 1,
|
|
|
+ size: 10,
|
|
|
+ businessType : this.activeName,
|
|
|
+ keyWord: null,
|
|
|
+ invoiceNo: null,
|
|
|
+ clientManagerName: null,
|
|
|
+ status: null,
|
|
|
+ startPunishDate: null,
|
|
|
+ endPunishDate: null,
|
|
|
+ };
|
|
|
+ this.page();
|
|
|
+ },
|
|
|
+ // 重置条件
|
|
|
+ resetSearch() {
|
|
|
+ this.findDate = null;
|
|
|
+ this.queryDTO = {
|
|
|
+ page: 1,
|
|
|
+ size: 10,
|
|
|
+ businessType : this.activeName,
|
|
|
+ keyWord: null,
|
|
|
+ invoiceNo: null,
|
|
|
+ clientManagerName: null,
|
|
|
+ status: null,
|
|
|
+ startPunishDate: null,
|
|
|
+ endPunishDate: null,
|
|
|
+ };
|
|
|
+ this.page();
|
|
|
+ },
|
|
|
+ // 查询罚款记录
|
|
|
+ page() {
|
|
|
+ if (this.findDate) {
|
|
|
+ this.queryDTO.startPunishDate = this.findDate[0] + ' 00:00:00';
|
|
|
+ this.queryDTO.endPunishDate = this.findDate[1] + ' 23:59:59';
|
|
|
+ }
|
|
|
+ this.$api.financeFine.page(this.queryDTO).then((res) => {
|
|
|
+ this.listLoading = false;
|
|
|
+ this.pageData = res.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped lang="scss"></style>
|
