|
@@ -2,37 +2,25 @@
|
|
|
<ui-group v-if="floders.length">
|
|
|
<ui-group-option>
|
|
|
<span @click="canAll && (showAll = !showAll)" :class="{ ['fun-ctrl']: canAll }">
|
|
|
+ {{ root.title }}
|
|
|
<template v-if="canAll">
|
|
|
<UpOutlined v-if="showAll" />
|
|
|
<DownOutlined v-else />
|
|
|
</template>
|
|
|
- {{ root.title }}
|
|
|
</span>
|
|
|
</ui-group-option>
|
|
|
<ui-group-option>
|
|
|
<div class="items">
|
|
|
- <div
|
|
|
- class="img-item"
|
|
|
- v-for="(_, i) in showLen"
|
|
|
- :key="floders[i].filesId"
|
|
|
- :style="{ '--rawLen': samLen }"
|
|
|
- >
|
|
|
+ <div class="img-item" v-for="(_, i) in showLen" :key="floders[i].filesId">
|
|
|
<div class="img-item-content">
|
|
|
- <div>
|
|
|
- <Sign
|
|
|
- focus
|
|
|
- :media="{ url: floders[i].filesUrl }"
|
|
|
- @click="clickHandler(floders[i])"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <!-- <img :src="floders[i].filesUrl" /> -->
|
|
|
+ <img :src="floders[i].filesUrl" @click="clickHandler(floders[i])" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</ui-group-option>
|
|
|
</ui-group>
|
|
|
|
|
|
- <Tabs v-if="!emptyTabs" v-model:activeKey="activeTab" class="f-tabs">
|
|
|
+ <Tabs v-if="!emptyTabs" v-model:activeKey="activeTab">
|
|
|
<template v-for="children in root.children">
|
|
|
<TabPane
|
|
|
:tab="children.title"
|
|
@@ -43,7 +31,8 @@
|
|
|
</TabPane>
|
|
|
</template>
|
|
|
</Tabs>
|
|
|
- <template v-for="c in children" :key="c.id" v-else>
|
|
|
+
|
|
|
+ <template v-for="c in children" :key="c.id">
|
|
|
<ModalFloderView
|
|
|
:root="c"
|
|
|
v-if="isLastLevel(c)"
|
|
@@ -56,7 +45,6 @@ import { Floder, FloderRoot, getFlatFloders } from "@/store";
|
|
|
import { computed, ref } from "vue";
|
|
|
import { TabPane, Tabs } from "ant-design-vue";
|
|
|
import { DownOutlined, UpOutlined } from "@ant-design/icons-vue";
|
|
|
-import Sign from "@/components/static-preview/sign.vue";
|
|
|
|
|
|
const props = defineProps<{ root: FloderRoot }>();
|
|
|
const emit = defineEmits<{ (e: "preview", v: [Floder, FloderRoot]): void }>();
|
|
@@ -90,7 +78,7 @@ const children = computed(() => {
|
|
|
});
|
|
|
const len = computed(() => floders.value.length);
|
|
|
const showAll = ref(false);
|
|
|
-const samLen = 6;
|
|
|
+const samLen = 3;
|
|
|
const showLen = computed(() => (showAll.value ? len.value : Math.min(samLen, len.value)));
|
|
|
const canAll = computed(() => len.value > samLen);
|
|
|
</script>
|
|
@@ -101,14 +89,13 @@ const canAll = computed(() => len.value > samLen);
|
|
|
flex-wrap: wrap;
|
|
|
}
|
|
|
.img-item {
|
|
|
- width: calc(100% / var(--rawLen));
|
|
|
- padding-right: 5px;
|
|
|
+ width: 33.33%;
|
|
|
+ padding: 5px;
|
|
|
.img-item-content {
|
|
|
padding-top: 56.25%;
|
|
|
position: relative;
|
|
|
cursor: pointer;
|
|
|
-
|
|
|
- > div {
|
|
|
+ img {
|
|
|
position: absolute;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
@@ -125,12 +112,3 @@ const canAll = computed(() => len.value > samLen);
|
|
|
--swiper-navigation-size: 30px;
|
|
|
}
|
|
|
</style>
|
|
|
-
|
|
|
-<style>
|
|
|
-.f-tabs.ant-tabs-top > .ant-tabs-nav {
|
|
|
- margin-bottom: 30px;
|
|
|
-}
|
|
|
-.f-tabs.ant-tabs-top > .ant-tabs-nav::before {
|
|
|
- display: none !important;
|
|
|
-}
|
|
|
-</style>
|