|
|
@@ -1,133 +1,151 @@
|
|
|
<template>
|
|
|
- <div class="p-2">
|
|
|
- <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
|
|
|
- :leave-active-class="proxy?.animate.searchAnimate.leave">
|
|
|
- <div v-show="showSearch" class="mb-[10px] bg-white p-[20px] rounded-[4px] flex justify-between items-center shadow-sm" style="background-color: #fff; padding: 20px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,21,41,.08);">
|
|
|
- <div class="text-[18px] font-bold text-[#303133]" style="font-size: 18px; font-weight: bold; color: #303133;">门店管理</div>
|
|
|
- <div class="flex items-center gap-[10px]" style="display: flex; gap: 10px; align-items: center;">
|
|
|
- <el-input v-model="queryParams.storeOrContact" placeholder="搜索门店名称/联系人" prefix-icon="Search"
|
|
|
- style="width: 250px" clearable @keyup.enter="handleQuery" @clear="handleQuery" />
|
|
|
- <el-cascader v-model="searchRegionValue" :options="areaOptions" placeholder="所属城市"
|
|
|
- style="width: 150px" clearable @change="handleSearchAreaChange" />
|
|
|
- <el-select v-model="queryParams.station" placeholder="所属站点" style="width: 150px" clearable @change="handleQuery">
|
|
|
- <el-option v-for="site in searchSiteOptions" :key="site.value" :label="site.label" :value="site.value" />
|
|
|
- </el-select>
|
|
|
- <el-select v-model="queryParams.status" placeholder="状态" style="width: 120px" clearable @change="handleQuery">
|
|
|
- <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
- </el-select>
|
|
|
- <el-button type="primary" icon="Plus" @click="handleAdd" v-hasPermi="['system:store:add']">新增门店</el-button>
|
|
|
- </div>
|
|
|
+ <div class="page-container">
|
|
|
+ <!-- 顶部搜索区域 -->
|
|
|
+ <div class="search-header-flex mb-4">
|
|
|
+ <div class="page-title">门店管理</div>
|
|
|
+ <div class="search-actions">
|
|
|
+ <el-input v-model="queryParams.storeOrContact" placeholder="搜索门店名称/联系人" prefix-icon="Search"
|
|
|
+ class="search-input" clearable @keyup.enter="handleQuery" @clear="handleQuery" />
|
|
|
+ <el-cascader v-model="searchRegionValue" :options="areaOptions" placeholder="所属城市"
|
|
|
+ class="filter-cascader" clearable @change="handleSearchAreaChange" />
|
|
|
+ <el-select v-model="queryParams.station" placeholder="所属站点" class="filter-select" clearable @change="handleQuery">
|
|
|
+ <el-option v-for="site in searchSiteOptions" :key="site.value" :label="site.label" :value="site.value" />
|
|
|
+ </el-select>
|
|
|
+ <el-select v-model="queryParams.status" placeholder="状态" class="filter-select-mini" clearable @change="handleQuery">
|
|
|
+ <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
+ </el-select>
|
|
|
+ <el-button type="primary" class="add-btn" icon="Plus" @click="handleAdd" v-hasPermi="['merchant:storeManagement:add']">新增门店</el-button>
|
|
|
</div>
|
|
|
- </transition>
|
|
|
-
|
|
|
- <el-card shadow="never">
|
|
|
+ </div>
|
|
|
|
|
|
- <el-table v-loading="loading" border :data="storeList" @selection-change="handleSelectionChange">
|
|
|
+ <!-- 表格区域 -->
|
|
|
+ <div class="table-card">
|
|
|
+ <el-table v-loading="loading" :data="storeList" @selection-change="handleSelectionChange" class="custom-table" :header-cell-style="{ background: '#f8f9fb', color: '#606266', fontWeight: '600' }">
|
|
|
<el-table-column type="selection" width="55" align="center" />
|
|
|
- <el-table-column label="门店信息" align="left" width="300">
|
|
|
+
|
|
|
+ <!-- 门店信息 -->
|
|
|
+ <el-table-column label="门店信息" align="left" width="280">
|
|
|
<template #default="scope">
|
|
|
- <div class="store-info" style="display: flex; align-items: center; gap: 10px;">
|
|
|
- <div class="store-logo">
|
|
|
- <image-preview :src="scope.row.logoUrl" :width="50" :height="50" />
|
|
|
+ <div class="store-info-box">
|
|
|
+ <div class="store-logo-wrap">
|
|
|
+ <el-image :src="scope.row.logoUrl" class="store-logo-img" fit="cover">
|
|
|
+ <template #error>
|
|
|
+ <div class="image-slot"><el-icon><Picture /></el-icon></div>
|
|
|
+ </template>
|
|
|
+ </el-image>
|
|
|
</div>
|
|
|
- <div class="store-details" style="display: flex; flex-direction: column; gap: 6px;">
|
|
|
- <div class="store-name" style="font-size: 14px; font-weight: 500; color: #303133;">{{ scope.row.name }}</div>
|
|
|
- <div class="store-categories" style="display: flex; gap: 6px;">
|
|
|
- <el-tag size="small" type="warning" effect="plain" v-if="scope.row.tenantName">{{ scope.row.tenantName }}</el-tag>
|
|
|
- <el-tag size="small" type="success" effect="plain" v-if="scope.row.tenantCatergoriesName">{{ scope.row.tenantCatergoriesName }}</el-tag>
|
|
|
+ <div class="store-text-details">
|
|
|
+ <div class="store-name-title">{{ scope.row.name }}</div>
|
|
|
+ <div class="store-tag-row">
|
|
|
+ <span class="tag-brand" v-if="scope.row.tenantName">{{ scope.row.tenantName }}</span>
|
|
|
+ <span class="tag-category" v-if="scope.row.tenantCatergoriesName">{{ scope.row.tenantCatergoriesName }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="资质认证" align="center" width="100">
|
|
|
- <template #default="scope">
|
|
|
- <image-preview v-if="scope.row.businessLicenseUrl" :src="scope.row.businessLicenseUrl" :width="40" :height="40" />
|
|
|
- <span v-else>-</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="服务项目" align="center" width="200">
|
|
|
+
|
|
|
+ <!-- 服务项目 -->
|
|
|
+ <el-table-column label="服务项目" align="left" width="220">
|
|
|
<template #default="scope">
|
|
|
- <div class="services">
|
|
|
- <el-tag v-for="service in scope.row.services" :key="service" size="small"
|
|
|
- style="margin-right: 5px; margin-bottom: 5px">
|
|
|
+ <div class="service-tags-container">
|
|
|
+ <span v-for="service in scope.row.services" :key="service" class="service-item-tag">
|
|
|
{{ getServiceName(service) }}
|
|
|
- </el-tag>
|
|
|
+ </span>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="归属站点" align="center" width="150">
|
|
|
+
|
|
|
+ <!-- 资质认证 -->
|
|
|
+ <el-table-column label="资质认证" align="center" width="100">
|
|
|
<template #default="scope">
|
|
|
- <div>{{ scope.row.siteName }}</div>
|
|
|
+ <div class="auth-img-wrap">
|
|
|
+ <el-image v-if="scope.row.businessLicenseUrl" :src="scope.row.businessLicenseUrl" class="auth-img" :preview-src-list="[scope.row.businessLicenseUrl]" preview-teleported />
|
|
|
+ <span v-else class="text-placeholder">-</span>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="服务单" align="center" width="150">
|
|
|
+
|
|
|
+ <!-- 归属区域/站点 -->
|
|
|
+ <el-table-column label="归属区域/站点" align="left" width="180">
|
|
|
<template #default="scope">
|
|
|
- <div>{{ scope.row.serviceOrder }}</div>
|
|
|
+ <div class="location-info">
|
|
|
+ <div class="area-name">{{ scope.row.regionName || '未知区域' }}</div>
|
|
|
+ <div class="station-name">
|
|
|
+ <el-icon class="loc-icon"><Location /></el-icon>
|
|
|
+ <span>{{ scope.row.siteName }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="营业时间" align="center" width="150">
|
|
|
+
|
|
|
+ <!-- 服务单 -->
|
|
|
+ <el-table-column label="服务单" align="center" width="100">
|
|
|
<template #default="scope">
|
|
|
- <div>{{ formatTime(scope.row.startBusinessTime) }}-{{ formatTime(scope.row.endBusinessTime) }}</div>
|
|
|
+ <span class="order-count">{{ scope.row.serviceOrder || 0 }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="门店地址" align="center" width="300">
|
|
|
+
|
|
|
+ <!-- 营业时间 -->
|
|
|
+ <el-table-column label="营业时间" align="center" width="160">
|
|
|
<template #default="scope">
|
|
|
- <div>{{ scope.row.detailAddress }}</div>
|
|
|
+ <div class="business-time-text">
|
|
|
+ {{ formatTime(scope.row.startBusinessTime) }},{{ formatTime(scope.row.endBusinessTime) }}
|
|
|
+ </div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="联系方式" align="left" width="180">
|
|
|
+
|
|
|
+ <!-- 联系方式 -->
|
|
|
+ <el-table-column label="联系方式" align="left" width="200">
|
|
|
<template #default="scope">
|
|
|
- <div style="display: flex; flex-direction: column; gap: 6px;">
|
|
|
- <div style="display: flex; align-items: center; gap: 6px; color: #606266; font-size: 14px;">
|
|
|
- <el-icon size="16"><User /></el-icon>
|
|
|
+ <div class="contact-card">
|
|
|
+ <div class="contact-person">
|
|
|
+ <el-icon><User /></el-icon>
|
|
|
<span>{{ scope.row.contact }}</span>
|
|
|
</div>
|
|
|
- <div style="display: flex; align-items: center; gap: 6px; color: #409eff; font-size: 14px;">
|
|
|
- <el-icon size="16"><Phone /></el-icon>
|
|
|
- <span>{{ scope.row.contactNumber }}</span>
|
|
|
+ <div class="contact-phone">
|
|
|
+ <el-icon><Phone /></el-icon>
|
|
|
+ <span class="phone-link">{{ scope.row.contactNumber }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="有效期至" align="center" width="120">
|
|
|
- <template #default="scope">
|
|
|
- <div>{{ parseTime(scope.row.validity, '{y}-{m}-{d}') }}</div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="状态" align="center" width="100">
|
|
|
+
|
|
|
+ <!-- 门店地址 -->
|
|
|
+ <el-table-column label="门店地址" align="left" min-width="250">
|
|
|
<template #default="scope">
|
|
|
- <template v-for="item in statusList" :key="item.value">
|
|
|
- <el-tag v-if="scope.row.status === item.value" :type="item.style">{{ item.label }}</el-tag>
|
|
|
- </template>
|
|
|
+ <div class="address-text" :title="scope.row.detailAddress">{{ scope.row.detailAddress }}</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
|
|
|
+
|
|
|
+ <!-- 操作 -->
|
|
|
+ <el-table-column label="操作" align="center" width="180" fixed="right">
|
|
|
<template #default="scope">
|
|
|
- <el-tooltip content="详情" placement="top">
|
|
|
- <el-button link type="primary" icon="View" @click="handleDetail(scope.row)"></el-button>
|
|
|
- </el-tooltip>
|
|
|
- <el-tooltip content="修改" placement="top">
|
|
|
- <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
|
|
|
- v-hasPermi="['system:store:edit']"></el-button>
|
|
|
- </el-tooltip>
|
|
|
- <el-dropdown trigger="click" @command="(cmd: string) => handleCommand(cmd, scope.row)">
|
|
|
- <el-button link type="primary" icon="More" style="margin-left: 10px"></el-button>
|
|
|
- <template #dropdown>
|
|
|
- <el-dropdown-menu>
|
|
|
- <el-dropdown-item command="renew" icon="Clock">续期</el-dropdown-item>
|
|
|
- <el-dropdown-item v-if="scope.row.status === 1" command="ban" icon="CircleClose">禁用</el-dropdown-item>
|
|
|
- <el-dropdown-item v-if="scope.row.status === 3" command="enable" icon="CircleCheck">启用</el-dropdown-item>
|
|
|
- </el-dropdown-menu>
|
|
|
- </template>
|
|
|
- </el-dropdown>
|
|
|
+ <div class="operation-links">
|
|
|
+ <el-button v-hasPermi="['merchant:storeManagement:query']" link type="primary" @click="handleDetail(scope.row)">详情</el-button>
|
|
|
+ <el-button v-hasPermi="['merchant:storeManagement:edit']" link type="primary" @click="handleUpdate(scope.row)">编辑</el-button>
|
|
|
+ <el-dropdown trigger="hover" @command="(cmd: string) => handleCommand(cmd, scope.row)">
|
|
|
+ <span class="more-link">
|
|
|
+ 更多 <el-icon><ArrowDown /></el-icon>
|
|
|
+ </span>
|
|
|
+ <template #dropdown>
|
|
|
+ <el-dropdown-menu>
|
|
|
+ <el-dropdown-item v-hasPermi="['merchant:storeManagement:renew']" command="renew">续期</el-dropdown-item>
|
|
|
+ <el-dropdown-item v-if="scope.row.status === 1" v-hasPermi="['merchant:storeManagement:disable']" command="ban">禁用</el-dropdown-item>
|
|
|
+ <el-dropdown-item v-if="scope.row.status === 3" v-hasPermi="['merchant:storeManagement:enable']" command="enable">启用</el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </template>
|
|
|
+ </el-dropdown>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
|
|
|
- <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
|
|
|
+ <div class="pagination-footer">
|
|
|
+ <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
|
|
|
v-model:limit="queryParams.pageSize" @pagination="getList" />
|
|
|
- </el-card>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<!-- 添加或修改门店管理对话框 -->
|
|
|
<el-dialog :title="dialog.title" v-model="dialog.visible" width="600px" append-to-body>
|
|
|
<el-form ref="storeFormRef" :model="form" :rules="rules" label-width="120px">
|
|
|
@@ -960,58 +978,257 @@ onMounted(() => {
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-.brand-pagination {
|
|
|
- margin-top: 10px;
|
|
|
- padding-top: 10px;
|
|
|
- border-top: 1px solid #ebeef5;
|
|
|
- text-align: center;
|
|
|
+.page-container {
|
|
|
+ padding: 20px;
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ min-height: calc(100vh - 84px);
|
|
|
}
|
|
|
|
|
|
-.custom-pagination {
|
|
|
+/* 顶部搜索栏 */
|
|
|
+.search-header-flex {
|
|
|
display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
align-items: center;
|
|
|
- justify-content: center;
|
|
|
- gap: 10px;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 16px 24px;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0 1px 4px rgba(0,21,41,.04);
|
|
|
+}
|
|
|
+
|
|
|
+.page-title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #303133;
|
|
|
+}
|
|
|
+
|
|
|
+.search-actions {
|
|
|
+ display: flex;
|
|
|
+ gap: 12px;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.search-input {
|
|
|
+ width: 240px;
|
|
|
+}
|
|
|
+
|
|
|
+.filter-cascader, .filter-select {
|
|
|
+ width: 150px;
|
|
|
+}
|
|
|
+
|
|
|
+.filter-select-mini {
|
|
|
+ width: 100px;
|
|
|
+}
|
|
|
+
|
|
|
+.add-btn {
|
|
|
+ background-color: #409eff;
|
|
|
+ border-color: #409eff;
|
|
|
+ padding: 8px 20px;
|
|
|
+ font-weight: 500;
|
|
|
+ border-radius: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 表格卡片 */
|
|
|
+.table-card {
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 10px;
|
|
|
+ box-shadow: 0 1px 4px rgba(0,21,41,.04);
|
|
|
+}
|
|
|
+
|
|
|
+.custom-table {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+/* 门店信息列 */
|
|
|
+.store-info-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.store-logo-wrap {
|
|
|
+ width: 48px;
|
|
|
+ height: 48px;
|
|
|
+ border-radius: 6px;
|
|
|
+ overflow: hidden;
|
|
|
+ border: 1px solid #f0f0f0;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.store-logo-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.store-text-details {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.store-name-title {
|
|
|
font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #303133;
|
|
|
}
|
|
|
|
|
|
-.page-arrow {
|
|
|
- cursor: pointer;
|
|
|
- color: #606266;
|
|
|
- user-select: none;
|
|
|
- padding: 2px 8px;
|
|
|
- transition: color 0.3s;
|
|
|
+.store-tag-row {
|
|
|
+ display: flex;
|
|
|
+ gap: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.tag-brand {
|
|
|
+ font-size: 11px;
|
|
|
+ color: #e6a23c;
|
|
|
+ background-color: #fdf6ec;
|
|
|
+ padding: 1px 6px;
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.tag-category {
|
|
|
+ font-size: 11px;
|
|
|
+ color: #67c23a;
|
|
|
+ background-color: #f0f9eb;
|
|
|
+ padding: 1px 6px;
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 服务项目列 */
|
|
|
+.service-tags-container {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 6px;
|
|
|
}
|
|
|
|
|
|
-.page-arrow:hover:not(.disabled) {
|
|
|
+.service-item-tag {
|
|
|
+ font-size: 12px;
|
|
|
color: #409eff;
|
|
|
+ background-color: #ecf5ff;
|
|
|
+ padding: 2px 8px;
|
|
|
+ border-radius: 4px;
|
|
|
}
|
|
|
|
|
|
-.page-arrow.disabled {
|
|
|
- color: #c0c4cc;
|
|
|
- cursor: not-allowed;
|
|
|
+/* 资质列 */
|
|
|
+.auth-img-wrap {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
|
|
|
-.page-number {
|
|
|
+.auth-img {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid #f0f0f0;
|
|
|
cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.text-placeholder {
|
|
|
+ color: #c0c4cc;
|
|
|
+}
|
|
|
+
|
|
|
+/* 区域/站点列 */
|
|
|
+.location-info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.area-name {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #303133;
|
|
|
+}
|
|
|
+
|
|
|
+.station-name {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 4px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #909399;
|
|
|
+}
|
|
|
+
|
|
|
+.loc-icon {
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 服务单列 */
|
|
|
+.order-count {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #606266;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+/* 营业时间列 */
|
|
|
+.business-time-text {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #606266;
|
|
|
+}
|
|
|
+
|
|
|
+/* 联系方式列 */
|
|
|
+.contact-card {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.contact-person, .contact-phone {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ font-size: 13px;
|
|
|
color: #606266;
|
|
|
- padding: 2px 8px;
|
|
|
- transition: all 0.3s;
|
|
|
}
|
|
|
|
|
|
-.page-number:hover {
|
|
|
+.phone-link {
|
|
|
color: #409eff;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+/* 门店地址列 */
|
|
|
+.address-text {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #606266;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+
|
|
|
+/* 操作列 */
|
|
|
+.operation-links {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12px;
|
|
|
}
|
|
|
|
|
|
-.page-number.active {
|
|
|
+.more-link {
|
|
|
color: #409eff;
|
|
|
- font-weight: bold;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 14px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 4px;
|
|
|
}
|
|
|
|
|
|
-.total-text {
|
|
|
- margin-left: 15px;
|
|
|
- font-size: 12px;
|
|
|
- color: #909399;
|
|
|
+.more-link:hover {
|
|
|
+ text-decoration: underline;
|
|
|
+}
|
|
|
+
|
|
|
+/* 分页 */
|
|
|
+.pagination-footer {
|
|
|
+ margin-top: 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+}
|
|
|
+
|
|
|
+.image-slot {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: #f5f7fa;
|
|
|
+ color: #a8abb2;
|
|
|
}
|
|
|
</style>
|
|
|
|
