weipengfei
/
mer-tradescreen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

sd

This commit is contained in:
zmj 2023-11-25 18:35:23 +08:00
parent 9875f9b667
commit e8edbd8f6a
15 changed files with 984 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/components/header.vue
View File

@ -3,28 +3,45 @@
<div class="logo">
</div>
<div class="tab">
<img v-if="show[0]" @click="showFn(0, '/')" class="tab-li" :src="u('SY')" alt="">
<img v-else class="tab-li" @click="showFn(0, '/')" :src="u('SYXZ')" alt="">
<div class="tab-li">
<img @click="showFn(0, '/')" class="tab-img" v-if="show[0]" style="width: 6vw;height:2vh;" :src="u('SY')"
alt="">
<img @click="showFn(0, '/')" class="tab-img" v-else style="width: 7vw; height: 3vh;" :src="u('SYXZ')"
alt="">
</div>
<div class="tab-li">
<img @click="showFn(1, '/commodity')" class="tab-img" v-if="show[1]" style="width: 6vw;height:2vh;"
:src="u('SP')" alt="">
<img @click="showFn(1, '/commodity')" class="tab-img" v-else style="width: 7vw;height:3vh;" :src="u('SPXZ')"
alt="">
</div>
<div class="tab-li">
<img @click="showFn(2, '/Businesses')" class="tab-img" v-if="show[2]" style="width: 6vw;height:2vh;"
:src="u('SH')" alt="">
<img @click="showFn(2, '/Businesses')" class="tab-img" v-else style="width: 7vw;height:3vh;"
:src="u('SHXZ')" alt="">
</div>
<div class="tab-li">
<img @click="showFn(3, '/order')" class="tab-img" v-if="show[3]" style="width: 6vw;height:2vh;"
:src="u('DD')" alt="">
<img @click="showFn(3, '/order')" class="tab-img" v-else style="width: 7vw;height:3vh;" :src="u('DDXZ')"
alt="">
<img v-if="show[1]" @click="showFn(1, '/commodity')" class="tab-li" src="/static/index/SP.png" alt="">
<img v-else="show[1]" @click="showFn(1, '/commodity')" class="tab-li" src="/static/index/SPXZ.png" alt="">
</div>
<div class="tab-li">
<img @click="showFn(4, '/finance')" class="tab-img" v-if="show[4]" style="width: 6vw;height:2vh;"
:src="u('CW')" alt="">
<img @click="showFn(4, '/finance')" class="tab-img" v-else style="width: 7vw;height:3vh;" :src="u('CWXZ')"
alt="">
<img v-if="show[2]" @click="showFn(2)" class="tab-li" src="/static/index/SH.png" alt="">
<img v-else class="tab-li" @click="showFn(2)" src="/static/index/SHXZ.png" alt="">
<img class="tab-li" @click="showFn(3)" v-if="show[3]" src="/static/index/DD.png" alt="">
<img class="tab-li" @click="showFn(3)" v-else src="/static/index/DDxz.png" alt="">
<img class="tab-li" @click="showFn(4)" v-if="show[4]" src="/static/index/CW.png" alt="">
<img class="tab-li" @click="showFn(4)" v-else src="/static/index/CWXZ.png" alt="">
</div>
</div>
<div class="right">
<div class="rigth-li" @click="choseTown = true">泸县</div>
<Transition>
<div class="address" v-if="choseTown">
<div class="address-li" @click="choseTownFn(1)"
v-for="(item, index) in [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]">泸县</div>
v-for="( item, index ) in [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1] ">泸县</div>
</div>
</Transition>
@ -93,7 +110,7 @@ const choseTownFn = (id) => {
height: 6vh;
align-items: center;
justify-content: space-between;
background-image: url('/static/index/TIT.png');
background-image: url('/static/index/LOGO.png');
background-color: #000C14;
background-size: cover;
@ -110,11 +127,25 @@ const choseTownFn = (id) => {
align-items: center;
margin-left: 120px;
width: 50vw;
height: 100%;
// background-color: white;
.tab-li {
width: 13%;
margin-right: 10px;
width: 8vw;
border-left: 1px solid #4AB9D0;
text-align: center;
cursor: pointer;
height: 1.5vh;
position: relative;
// background-color: red;
.tab-img {
position: absolute;
top: 50%;
left: 50%;
transform: (translate(-50%, -50%));
}
}
}

21
src/router/index.js
View File

@ -16,6 +16,27 @@ const routes= [
name: 'commodity',
component:()=>import('@/view/commodity.vue'),
},
{
path: '/Businesses',
name: 'commBusinessesodity',
component:()=>import('@/view/Businesses.vue'),
},
{
path: '/storeLogin',
name: 'storeLogin',
component:()=>import('@/view/storeLogin.vue'),
},
{
path: '/order',
name: 'order',
component:()=>import('@/view/order.vue'),
},
{
path: '/finance',
name: 'finance',
component:()=>import('@/view/finance.vue'),
},
]

181
src/view/Businesses.vue Normal file
View File

@ -0,0 +1,181 @@
<template>
<div class="box">
<div class="img-cls">
<img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;" alt="">
<div class="content">
<div class="btns">
<div class="btn" @click="test">正常开启的商户</div>
<div class="btn" @click="test">已关闭的商户</div>
</div>
<div class="table">
<dv-scroll-board :config="configs" @click='hdClick' style="width:95vw;height:100%" />
</div>
</div>
</div>
</div>
</template>
<script setup>
// 102B3
import { ref, reactive, onMounted } from "vue"
import { useRouter } from 'vue-router'
const route = useRouter()
const ShwostoreType = ref(false)
const test = () => {
console.log(6)
}
const hdClick = (e) => {
// console.log(e)
if (e.columnIndex == 10) {
// alert(45)
route.push('/storeLogin')
}
}
// const hdClick = (b) => {
// ShwostoreType.value = b
// alert(565)
// }
const a = (aaa) => {
for (let i = 0; i < 100; i++) {
if (i % 2 == 0) {
aaa.data.push(
[
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >排sd序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;color:#3D9EB5';cursor: pointer;>登录</div>`,
]
)
} else {
aaa.data.push(
[
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排sd序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;color:#3D9EB5; cursor: pointer;'>登录</div>`,
]
)
}
}
}
const configs = reactive({
headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
oddRowBGC: '',
evenRowBGC: "",
rowNum: 20,
header: [
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>ID</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商户名称</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商户姓名</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商户属地</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>备注</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>推荐</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>创建时间</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>押金</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商户分类</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>开启/关闭</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>操作</div>`,
],
data: [
]
})
onMounted(() => {
a(configs)
})
</script>
<style lang="scss" scoped>
.box {
margin-top: 3vh;
width: 100vw;
height: 90vh;
position: relative;
.img-cls {
width: 99%;
height: 90vh;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
// background-color: #fff;
box-sizing: border-box;
.content {
width: 100%;
height: 100%;
padding: 2vw;
}
}
.btns {
display: flex;
.btn {
color: white;
border: 1px solid #BF6D5D;
padding: 3px 10px;
border-radius: 20px;
margin-right: 10px;
}
}
.table {
width: 100%;
height: 78vh;
margin-top: 2vh;
}
}
.manageBtn {
padding: 2px 10px;
border: 1px solid #6377C8;
border-radius: 20px;
margin-right: 10px;
}
:deep(.ceil) {
padding: 0 !important;
margin-bottom: 5px;
margin-right: 2px;
}
:deep(.header-item) {
padding: 0 !important;
}
.row {}
</style>

102
src/view/commodity.vue
View File

@ -1,14 +1,25 @@
<template>
<div class="box">
<div class="img-cls">
<img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;" alt="">
<img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;z-index: -10000;" alt="">
<div class="content">
<div class="btns">
<div class="btn">商品分类</div>
<div class="btn">商品管理</div>
<div class="btns" style="position: absolute;">
<div class="btn" @click="test">商品分类</div>
<div class="btn" @click="hdClick(false)">商品管理</div>
</div>
<div class="table">
<dv-scroll-board :config="configs" @click='test' style="width:95vw;height:100%" />
<div style="display: flex;color: white;justify-content: flex-end;margin-right: 5vw;">
<div class="manageBtn">出售中商品</div>
<div class="manageBtn">仓库中商品</div>
<div class="manageBtn">待审核商品</div>
<div class="manageBtn">审核未通过商品</div>
</div>
<div class="table" v-if="ShwostoreType">
<dv-scroll-board :config="configs" style="width:95vw;height:100%" />
</div>
<div class="table" v-else>
<dv-scroll-board :config="configs2" style="width:95vw;height:100%" />
</div>
</div>
</div>
@ -19,10 +30,24 @@
<script setup>
// 102B3
import { ref, reactive, onMounted } from "vue"
onMounted(() => {
const ShwostoreType = ref(true)
const test = (e) => {
alert(4145)
// if (e.columnIndex == 1) {
// console.log(e)
// }
}
const hdClick = (b) => {
ShwostoreType.value = b
alert(565)
}
const a = (aaa) => {
for (let i = 0; i < 100; i++) {
if (i % 2 == 0) {
configs.data.push(
aaa.data.push(
[
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >排sd序</div>`,
@ -30,10 +55,15 @@ onMounted(() => {
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
]
)
} else {
configs.data.push(
aaa.data.push(
[
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排sd序</div>`,
@ -41,6 +71,11 @@ onMounted(() => {
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
]
@ -49,13 +84,6 @@ onMounted(() => {
}
})
const test = (e) => {
if (e.columnIndex == 1) {
console.log(e)
}
// alert(e)
}
const configs = reactive({
headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
@ -69,15 +97,36 @@ const configs = reactive({
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>是否显示</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>是否推荐</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>创建时间</div>`,
],
data: [
]
})
// 商品管理
const configs2 = reactive({
headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
oddRowBGC: '',
evenRowBGC: "",
rowNum: 20,
header: [
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>ID</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商品图</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商品名称</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商户名称</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商户分类</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商品售价</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>平台分类</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>销量</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>库存</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>推荐级别</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>更新时间</div>`,
],
data: [
]
})
onMounted(() => {
a(configs2)
console.log(5656)
})
</script>
<style lang="scss" scoped>
@ -108,6 +157,7 @@ const configs = reactive({
.btns {
display: flex;
cursor: pointer;
.btn {
color: white;
@ -115,17 +165,23 @@ const configs = reactive({
padding: 3px 10px;
border-radius: 20px;
margin-right: 10px;
cursor: pointer;
}
}
.table {
width: 100%;
height: 78vh;
height: 75vh;
margin-top: 2vh;
}
}
.manageBtn {
padding: 2px 10px;
border: 1px solid #6377C8;
border-radius: 20px;
margin-right: 10px;
}
:deep(.ceil) {
padding: 0 !important;
margin-bottom: 5px;

179
src/view/finance.vue Normal file
View File

@ -0,0 +1,179 @@
<template>
<div class="box">
<div class="img-cls">
<img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;" alt="">
<div class="content">
<div class="btns">
<div class="btn" @click="test">提现记录</div>
<div class="btn" @click="test">资金记录</div>
<div class="btn" @click="test">账单管理</div>
</div>
<div class="table">
<dv-scroll-board :config="configs" @click='hdClick' style="width:95vw;height:100%" />
</div>
</div>
</div>
</div>
</template>
<script setup>
// 102B3
import { ref, reactive, onMounted } from "vue"
import { useRouter } from 'vue-router'
const route = useRouter()
const ShwostoreType = ref(false)
const test = () => {
console.log(6)
}
const hdClick = (e) => {
if (e.columnIndex == 10) {
// route.push('/storeLogin')
}
}
const a = (aaa) => {
for (let i = 0; i < 100; i++) {
if (i % 2 == 0) {
aaa.data.push(
[
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >排sd序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
]
)
} else {
aaa.data.push(
[
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排sd序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
]
)
}
}
}
const configs = reactive({
headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
oddRowBGC: '',
evenRowBGC: "",
rowNum: 20,
header: [
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>序号</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>二维码</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>用户信息</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>用户UID</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>户名</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>提现金额</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>提现方式</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>银行名称</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>账号</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>审核状态</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>拒绝原因</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>添加时间</div>`,
],
data: [
]
})
onMounted(() => {
a(configs)
})
</script>
<style lang="scss" scoped>
.box {
margin-top: 3vh;
width: 100vw;
height: 90vh;
position: relative;
.img-cls {
width: 99%;
height: 90vh;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
// background-color: #fff;
box-sizing: border-box;
.content {
width: 100%;
height: 100%;
padding: 2vw;
}
}
.btns {
display: flex;
.btn {
color: white;
border: 1px solid #BF6D5D;
padding: 3px 10px;
border-radius: 20px;
margin-right: 10px;
}
}
.table {
width: 100%;
height: 79vh;
margin-top: 2vh;
}
}
.manageBtn {
padding: 2px 10px;
border: 1px solid #6377C8;
border-radius: 20px;
margin-right: 10px;
}
:deep(.ceil) {
padding: 0 !important;
margin-bottom: 5px;
margin-right: 2px;
}
:deep(.header-item) {
padding: 0 !important;
}
.row {}
</style>

155
src/view/index.vue
View File

@ -1,7 +1,11 @@
<template>
<div class="box">
<div v-show="loading" style="position: relative;top: 50%;left: 50%;transform: translate(-50%,-50%);">
<dv-loading style="color: white;">Loading...</dv-loading>
</div>
<div class="box" :style="{ opacity: loading ? 0 : 1 }">
<div class="body">
<div class="l">
<img src="/static/index/PTYHL.png" style="position: absolute;width: 100%;height: 100%; " alt="">
<div class="user" id="user"></div>
<div class="storeNum">
<div class="tit"></div>
@ -31,7 +35,6 @@
<img src="/static/index/SPTB.png" class="product-icon" alt="">
</div>
</div>
<div class="Views">
<img src="/static/index/SSLLL.png" style="width: 100%;height: 100%;position: absolute;" alt="">
<div class="view-content">
@ -42,22 +45,18 @@
<div>周环比：32%</div>
</div>
</div>
</div>
<div class="r">
<!-- <div>
店铺销量排行
</div> -->
<div class="user">
<img src="/static/index/PTSP.png" style="position: absolute;width: 100%;height: 100%; " alt="">
<div class="user" style="width: 98%; ">
<div class="btns">
<span class="btn">店铺销量排行</span>
<span class="btn">店铺销量排行</span>
</div>
<dv-scroll-board :config="config3" style="width:95%;height:20vh" />
<dv-scroll-board :config="config3" style="height: 17vh;margin-left: 1%;" />
</div>
<div class="storeNum">
<div class="tit">
@ -78,12 +77,17 @@
<div class="foot-l">
<img src="/static/index/DDSJ.png" style="position: absolute;width: 100%;height: 100%; " alt="">
<div style="height: 5vh;"></div>
<div>
<dv-scroll-board :config="configs" style="width:25vw;height:40vh" />
<dv-scroll-board :config="configs" style="width:96%;height:40vh;margin-left: 2%;" />
</div>
</div>
<div class="c">
<img src="/static/index/CJYHTJ.png" style="position: absolute;width: 100%;height: 100%; " alt="">
<div style="height:5vh;"></div>
<div class="towns">
<div class="town-li" v-for="(item, index) in [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]">泸县</div>
@ -91,10 +95,11 @@
</div>
</div>
<div class="r">
<img src="/static/index/DRDD.png" style="position: absolute;width: 100%;height: 100%; " alt="">
<div style="height: 5vh;"></div>
<div>
<dv-scroll-board :config="configs2" style="width:25vw;height:40vh" />
<dv-scroll-board :config="configs2" style="width:96%;height:40vh;margin-left: 2%;" />
</div>
</div>
@ -108,7 +113,7 @@ import * as echarts from 'echarts';
import option from "./option"
import Remake from "@/components/Remake.vue"
import { ref, reactive } from "vue"
const loading = ref(true)
const i = 'https://ceshi-worker-task.lihaink.cn//uploads//images//20231123//20231123190555159fa2259.jpg'
@ -117,6 +122,7 @@ const configs = reactive(
{
header: ['所属地区', '日订单数', '日订单金额', '月订单数', '月订单金额'],
headerBGC: '#223B7E',
rowNum: 10,
data: [
['行1列1', '行1列2', '行1列3', 'sad', 'asdsa'],
['行2列1', '行2列2', '行2列3', 'sad', 'asdsa'],
@ -127,7 +133,11 @@ const configs = reactive(
['行7列1', '行7列2', '行7列3', 'sad', 'asdsa'],
['行8列1', '行8列2', '行8列3', 'sad', 'asdsa'],
['行9列1', '行9列2', '行9列3', 'sad', 'asdsa'],
['行10列1', '行10列2', '行10列3']
['行9列1', '行9列2', '行9列3', 'sad', 'asdsa'],
['行9列1', '行9列2', '行9列3', 'sad', 'asdsa'],
['行9列1', '行9列2', '行9列3', 'sad', 'asdsa'],
['行9列1', '行9列2', '行9列3', 'sad', 'asdsa'],
['行9列1', '行9列2', '行9列3', 'sad', 'asdsa'],
]
}
@ -137,6 +147,7 @@ const configs2 = reactive(
header: ['所属片区', '当日订单金额', '昨日订单金额'],
headerBGC: '#223B7E',
align: ['center'],
rowNum: 10,
data: [
['行1列1', '行1列2', '行1列3'],
['行2列1', '行2列2', '行2列3'],
@ -147,6 +158,10 @@ const configs2 = reactive(
['行7列1', '行7列2', '行7列3'],
['行8列1', '行8列2', '行8列3'],
['行9列1', '行9列2', '行9列3'],
['行9列1', '行9列2', '行9列3'],
['行9列1', '行9列2', '行9列3'],
['行9列1', '行9列2', '行9列3'],
['行9列1', '行9列2', '行9列3'],
['行10列1', '行10列2', '行10列3']
]
}
@ -156,11 +171,9 @@ const config3 = reactive({
oddRowBGC: "#001C2E",
evenRowBGC: "#001C2E",
columnWidth: [
50, 60, 70, 220, 100
3, 3, 4, 10, 4
],
data: [
[
`<div style=" text-align: center;background-image: url('/static/index/PM1.png');width: 30px;height: 30px;background-size: cover;">1</div> `,
`<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
@ -229,7 +242,9 @@ onMounted(() => {
}
initCharts('transactionUsers', option.transactionUsers)
setTimeout(() => {
loading.value = false
}, 1000)
// initCharts('user', option.userChartOption)
})
</script>
@ -249,21 +264,23 @@ onMounted(() => {
}
.body {
height: 50vh;
height: 45vh;
display: flex;
margin-top: 1vh;
justify-content: space-between;
.l {
flex: 1;
width: 25vw;
height: 100%;
background: url('/static/index/PTYHL.png');
// background-size: cover;
background-size: 25vw 50vh;
position: relative;
.user {
box-sizing: border-box;
padding-top: 5vh;
width: 100%;
height: 57%;
height: 58%;
// background-color: #fff;
.btn {
color: white;
@ -272,7 +289,8 @@ onMounted(() => {
.storeNum {
width: 100%;
height: 43%;
height: 42%;
// background-color: red;
.tit {
height: 15%;
@ -321,14 +339,14 @@ onMounted(() => {
.c {
box-sizing: border-box;
padding: 15px;
flex: 2;
width: 48vw;
height: 100%;
// background-color: pink;
display: flex;
flex-direction: column;
justify-content: space-between;
.product-list {
height: 75%;
// background-color: red;
height: 70%;
display: flex;
justify-content: space-between;
position: relative;
@ -349,10 +367,10 @@ onMounted(() => {
}
.Views {
margin-top: 2%;
height: 25%;
width: 100%;
box-sizing: border-box;
padding: 0 15px;
position: relative;
color: white;
font-size: 12px;
@ -362,20 +380,16 @@ onMounted(() => {
height: 100%;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 0 20px;
justify-content: space-around;
}
}
}
.r {
flex: 1;
width: 25vw;
height: 100%;
background: url('/static/index/PTSP.png');
// background-size: cover;
background-size: 25vw 49vh;
background-repeat: no-repeat;
position: relative;
.user {
box-sizing: border-box;
@ -412,7 +426,7 @@ onMounted(() => {
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
padding: 10px;
// padding: 10px;
.storebox {
@ -449,27 +463,28 @@ onMounted(() => {
}
.foot {
// margin-top: 30px;
height: 45vh;
margin-top: 1vh;
height: 46vh;
display: flex;
justify-content: space-between;
.foot-l {
flex: 1;
width: 25vw;
height: 100%;
background: url('/static/index/DDSJ.png');
background-size: 25vw 45vh;
background-repeat: no-repeat;
position: relative;
}
.c {
flex: 2;
width: 48vw;
position: relative;
height: 100%;
background: url('/static/index/CJYHTJ.png');
background-size: 50vw 45vh;
background-repeat: no-repeat;
box-sizing: border-box;
// background: url('');
.towns {
width: 50vw;
@ -495,47 +510,17 @@ onMounted(() => {
}
.r {
flex: 1;
width: 25vw;
height: 100%;
background: url('/static/index/DRDD.png');
background-size: 25vw 45vh;
background-repeat: no-repeat;
}
}
.producta {
width: 200px;
height: 200px;
background-color: black;
border-radius: 10px;
position: relative;
overflow: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.producta::before {
content: "";
position: absolute;
top: -100%;
left: -100%;
width: 200%;
height: 200%;
background: radial-gradient(circle, #ffffff 20%, rgba(255, 255, 255, 0) 70%);
animation: shine 2s infinite;
}
@keyframes shine {
0% {
transform: rotate(45deg) translate(-150%, -150%);
}
100% {
transform: rotate(45deg) translate(150%, 150%);
// background: url('');
}
}
.progress-bar {
transform: translateY(12px);
width: 100%;

20
src/view/option.js
View File

@ -237,11 +237,11 @@ const optins={
// data: ['访客人数','下单人数','支付人数']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
// toolbox: {
// feature: {
// saveAsImage: {}
// }
// },
grid: {
left: '3%',
right: '4%',
@ -457,11 +457,11 @@ const optins={
// data: ['访客人数','下单人数','支付人数']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
// toolbox: {
// feature: {
// saveAsImage: {}
// }
// },
grid: {
left: '3%',
right: '4%',

177
src/view/order.vue Normal file
View File

@ -0,0 +1,177 @@
<template>
<div class="box">
<div class="img-cls">
<img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;" alt="">
<div class="content">
<div class="btns">
<div class="btn" @click="test">订单列表</div>
<div class="btn" @click="test">退款单</div>
<div class="btn" @click="test">核销订单</div>
</div>
<div class="btns">
<div class="btn" @click="test">订单列表</div>
<div class="btn" @click="test">退款单</div>
<div class="btn" @click="test">核销订单</div>
</div>
<div class="table">
<dv-scroll-board :config="configs" @click='hdClick' style="width:95vw;height:100%" />
</div>
</div>
</div>
</div>
</template>
<script setup>
// 102B3
import { ref, reactive, onMounted } from "vue"
import { useRouter } from 'vue-router'
const route = useRouter()
const ShwostoreType = ref(false)
const test = () => {
console.log(6)
}
const hdClick = (e) => {
if (e.columnIndex == 10) {
// route.push('/storeLogin')
}
}
const a = (aaa) => {
for (let i = 0; i < 100; i++) {
if (i % 2 == 0) {
aaa.data.push(
[
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >排sd序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
]
)
} else {
aaa.data.push(
[
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排sd序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
]
)
}
}
}
const configs = reactive({
headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
oddRowBGC: '',
evenRowBGC: "",
rowNum: 20,
header: [
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>订单编号</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>用户信息</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>收货人/订购人</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商户名称</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商户分类</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商品信息</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>实际支付</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>订单状态</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>订单数属地</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>支付类型</div>`,
],
data: [
]
})
onMounted(() => {
a(configs)
})
</script>
<style lang="scss" scoped>
.box {
margin-top: 3vh;
width: 100vw;
height: 90vh;
position: relative;
.img-cls {
width: 99%;
height: 90vh;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
// background-color: #fff;
box-sizing: border-box;
.content {
width: 100%;
height: 100%;
padding: 2vw;
}
}
.btns {
display: flex;
.btn {
color: white;
border: 1px solid #BF6D5D;
padding: 3px 10px;
border-radius: 20px;
margin-right: 10px;
}
}
.table {
width: 100%;
height: 75vh;
margin-top: 2vh;
}
}
.manageBtn {
padding: 2px 10px;
border: 1px solid #6377C8;
border-radius: 20px;
margin-right: 10px;
}
:deep(.ceil) {
padding: 0 !important;
margin-bottom: 5px;
margin-right: 2px;
}
:deep(.header-item) {
padding: 0 !important;
}
.row {}
</style>

220
src/view/storeLogin.vue Normal file
View File

@ -0,0 +1,220 @@
<template>
<div class="top">
<div class="top-li">
<img src="/static/storeLogin/SPSL.png" style="width: 100%;height: 100%;position: absolute;" alt="">
<img src="/static/index/SPTB.png" class="product-icon" alt="">
</div>
<div class="top-li">
<img src="/static/storeLogin/SPSL.png" style="width: 100%;height: 100%;position: absolute;" alt="">
<img src="/static/index/SPTB.png" class="product-icon" alt="">
</div>
<div class="top-li">
<img src="/static/storeLogin/SPSL.png" style="width: 100%;height: 100%;position: absolute;" alt="">
<img src="/static/index/SPTB.png" class="product-icon" alt="">
</div>
<div class="top-li">
<img src="/static/storeLogin/SPSL.png" style="width: 100%;height: 100%;position: absolute;" alt="">
<img src="/static/index/SPTB.png" class="product-icon" alt="">
</div>
<div class="top-li">
<img src="/static/storeLogin/SPSL.png" style="width: 100%;height: 100%;position: absolute;" alt="">
<img src="/static/index/SPTB.png" class="product-icon" alt="">
</div>
</div>
<div class="bottom">
<div class="ranking">
<img src="/static/storeLogin/SPXSPH.png" class="img-cls" alt="">
<dv-scroll-board :config="config1" class="list" />
</div>
<div class="ranking">
<img src="/static/storeLogin/SPFKPH.png" class="img-cls" alt="">
<dv-scroll-board :config="config2" class="list" />
</div>
<div class="ranking">
<img src="/static/storeLogin/SPJGPH.png" class="img-cls" alt="">
<dv-scroll-board :config="config3" class="list" />
</div>
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue"
const config1 = reactive({
oddRowBGC: "#001C2E",
evenRowBGC: "#001C2E",
rowNum: 9,
columnWidth: [
3, 3, 5, 20, 5
],
data: []
}
)
const config2 = reactive({
oddRowBGC: "#001C2E",
evenRowBGC: "#001C2E",
rowNum: 9,
columnWidth: [
3, 3, 5, 20, 5
],
data: []
}
)
const config3 = reactive({
oddRowBGC: "#001C2E",
evenRowBGC: "#001C2E",
rowNum: 9,
columnWidth: [
3, 3, 5, 20, 5
],
data: []
}
)
onMounted(() => {
for (let i = 0; i < 20; i++) {
config3.data.push(
[
`<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM${(i + 1) < 3 ? (i + 1) : 4}.png');width: 30px;height: 30px;background-size: cover;" >${i + 1}</div> `,
`<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
`<div style='height:40px;line-height:40px'>商品名称</div>`,
`<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #4459CC, #53CAE2);transition: width 0.5s ease-in-out;'></div> </div>`,
`<div style='height:40px;line-height:40px '>5495 <span style='font-size:10px'>单</span> </div>`,
],
)
}
for (let i = 0; i < 20; i++) {
config1.data.push(
[
`<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM${(i + 1) < 3 ? (i + 1) : 4}.png');width: 30px;height: 30px;background-size: cover;" >${i + 1}</div> `,
`<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
`<div style='height:40px;line-height:40px'>商品名称</div>`,
`<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #0292EB, #53CAE2);transition: width 0.5s ease-in-out;'></div> </div>`,
`<div style='height:40px;line-height:40px '>5495 <span style='font-size:10px'>单</span> </div>`,
],
)
} for (let i = 0; i < 20; i++) {
config2.data.push(
[
`<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM${(i + 1) < 3 ? (i + 1) : 4}.png');width: 30px;height: 30px;background-size: cover;" >${i + 1}</div> `,
`<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
`<div style='height:40px;line-height:40px'>商品名称</div>`,
`<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #B15641, #52C8E1);transition: width 0.5s ease-in-out;'></div> </div>`,
`<div style='height:40px;line-height:40px '>5495 <span style='font-size:10px'>单</span> </div>`,
],
)
}
})
</script>
<style lang="scss" scoped>
@keyframes jump {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
.top {
height: 42vh;
display: flex;
justify-content: space-between;
align-items: center;
.top-li {
width: 19%;
height: 40vh;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
.product-icon {
width: 2vw;
height: 2vw;
position: absolute;
animation: jump 1s infinite;
top: 6vh;
}
}
// background-color: #fff;
}
.bottom {
height: 52vh;
display: flex;
justify-content: space-between;
.ranking {
width: 32%;
height: 52vh;
position: relative;
// background-color: #fff;
.list {
width: 95%;
margin: 0 auto;
margin-top: 5vh;
height: 90%;
}
.img-cls {
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
}
}
</style>

3
src/view/townDetail.vue
View File

@ -79,7 +79,7 @@ const config3 = reactive({
oddRowBGC: "#001C2E",
evenRowBGC: "#001C2E",
columnWidth: [
40, 60, 70, 200, 60
2, 3, 4, 10, 3
],
data: [
[
@ -426,5 +426,4 @@ onMounted(() => {
background: linear-gradient(to right, #455CCC, #51C2E0);
transition: width 0.5s ease-in-out;
}
</style>

BIN
static/index/LOGO.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

BIN
static/storeLogin/SPFKPH.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
static/storeLogin/SPJGPH.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
static/storeLogin/SPSL.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 201 KiB

BIN
static/storeLogin/SPXSPH.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB