148 lines
2.4 KiB
Vue
148 lines
2.4 KiB
Vue
|
<template>
|
||
|
|
<fix-base-style
|
||
|
|
:styleSpacing="styleSpacing"
|
||
|
|
:styleColor="styleColor"
|
||
|
|
:position="position"
|
||
|
|
:index="index"
|
||
|
|
>
|
||
|
|
<div class="fix-rubik-cube">
|
||
|
|
<div
|
||
|
|
class="box"
|
||
|
|
:class="[`is-${data.mode}`]"
|
||
|
|
:style="{
|
||
|
|
gap: `${data.gap}rpx`,
|
||
|
|
'--gap': `${data.gap}rpx`,
|
||
|
|
}"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="item"
|
||
|
|
v-for="(item, index) in data.list"
|
||
|
|
:key="index"
|
||
|
|
:class="[`is-${data.mode}-item-${index}`]"
|
||
|
|
@click="toPath(item.link)"
|
||
|
|
>
|
||
|
|
<image class="icon" :src="item.icon" mode="widthFix"></image>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</fix-base-style>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" name="fix-rubik-cube" setup>
|
||
|
|
import { type PropType } from "vue";
|
||
|
|
import type { Form } from "../../types/form";
|
||
|
|
import { baseProps } from "../../hooks";
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
data: {
|
||
|
|
type: Object as PropType<Form.RubikCube>,
|
||
|
|
default: () => {
|
||
|
|
return {
|
||
|
|
mode: "mode-1",
|
||
|
|
gap: 0,
|
||
|
|
list: [
|
||
|
|
{
|
||
|
|
icon: "",
|
||
|
|
tips: "宽度375px",
|
||
|
|
link: {
|
||
|
|
name: "",
|
||
|
|
type: "",
|
||
|
|
appid: "",
|
||
|
|
page: "",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: "",
|
||
|
|
tips: "宽度375px",
|
||
|
|
link: {
|
||
|
|
name: "",
|
||
|
|
type: "",
|
||
|
|
appid: "",
|
||
|
|
page: "",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
},
|
||
|
|
index: {
|
||
|
|
type: Number,
|
||
|
|
default: 0,
|
||
|
|
},
|
||
|
|
...baseProps,
|
||
|
|
});
|
||
|
|
const emits = defineEmits(["jump"]);
|
||
|
|
|
||
|
|
function toPath(link: Form.Link) {
|
||
|
|
emits("jump", link);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.box {
|
||
|
|
display: flex;
|
||
|
|
.item {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
box-sizing: border-box;
|
||
|
|
.icon {
|
||
|
|
width: 100%;
|
||
|
|
max-width: 100%;
|
||
|
|
border: 0;
|
||
|
|
vertical-align: middle;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.is-mode-1 {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(2, 1fr);
|
||
|
|
}
|
||
|
|
|
||
|
|
.is-mode-2 {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(3, 1fr);
|
||
|
|
}
|
||
|
|
|
||
|
|
.is-mode-3 {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr 1fr;
|
||
|
|
grid-template-rows: 1fr 1fr;
|
||
|
|
.item {
|
||
|
|
&.is-mode-3-item-0 {
|
||
|
|
grid-column: 1 / 2;
|
||
|
|
grid-row: 1 / 3;
|
||
|
|
}
|
||
|
|
&.is-mode-3-item-1 {
|
||
|
|
grid-column: 2 / 3;
|
||
|
|
grid-row: 1 / 2;
|
||
|
|
}
|
||
|
|
&.is-mode-3-item-2 {
|
||
|
|
grid-column: 2 / 3;
|
||
|
|
grid-row: 2 / 3;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.is-mode-4 {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr 1fr;
|
||
|
|
grid-template-rows: auto auto;
|
||
|
|
.item {
|
||
|
|
&.is-mode-4-item-0 {
|
||
|
|
grid-column: 1 / 3;
|
||
|
|
grid-row: 1 / 2;
|
||
|
|
}
|
||
|
|
&.is-mode-4-item-1 {
|
||
|
|
grid-column: 1 / 2;
|
||
|
|
grid-row: 2 / 3;
|
||
|
|
}
|
||
|
|
&.is-mode-4-item-2 {
|
||
|
|
grid-column: 2 / 3;
|
||
|
|
grid-row: 2 / 3;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|