hxgksystemapp/src/components/DesignForm/designLayout/designLayoutPage.vue

<!--
@ 作者: 秦东
@ 时间: 2024-02-22 10:39:16
@ 备注: 布局设计器
-->
<script lang='ts' setup>
import { reactive, computed, toRefs, ref, watch, inject } from 'vue'
import { subUnitStyle } from '@/types/styles'
import { useDesignStore } from '@/store/design'
/**
@ 作者: 秦东
@ 时间: 2024-02-21 14:31:00
@ 功能: 引入页面
*/
import DesignLayoutBut from "@/components/DesignForm/designLayout/designLayoutButPage.vue"

const props = withDefaults(
    defineProps<{
        layouytStyle: subUnitStyle
    }>(),
    {}
)
const emits = defineEmits(["update:layouytStyle"]);
/**
@ 作者: 秦东
@ 时间: 2024-02-21 14:29:49
@ 功能: 获取和更新数值
*/
const getUpdataMastVal = computed({
	get: () => props.layouytStyle,
	set: (val) => {
		emits("update:layouytStyle", val);
	},
});
</script>
<template>
    <div class="steeringWheel"> <!--margin-->
        <div class="steeringWheelCont">
            <div class="swLeft h30 leftBanJiaoTop"></div>
            <div class="swCentent h30 beiJingPingpu shangXia">
                <DesignLayoutBut v-model:data-val="getUpdataMastVal" :place="'marginTop'" />
            </div>
            <div class="swright h30 rightBanJiaoTop"></div>
        </div>
        <div class="steeringWheelCont">
            <div class="swLeft h140 beiJingPingpus zuoYou">
                <DesignLayoutBut v-model:data-val="getUpdataMastVal" :place="'marginLeft'" />
            </div>
            <div class="swCentent h140">
                 <!--padding-->
                 <div class="steeringWheel_s">
                    <div class="steeringWheelCont">
                        <div class="swLeft h30 leftBanJiaoTop"></div>
                        <div class="swCentent_s h30 beiJingPingpu shangXia">
                            <DesignLayoutBut v-model:data-val="getUpdataMastVal" :place="'paddingTop'" />
                        </div>
                        <div class="swright h30 rightBanJiaoTop"></div>
                    </div>
                    <div class="steeringWheelCont">
                        <div class="swLeft h30 beiJingPingpus zuoYou">
                            <DesignLayoutBut v-model:data-val="getUpdataMastVal" :place="'paddingLeft'" />
                        </div>
                        <div class="swCentent_s h30"></div>
                        <div class="swright h30 beiJingPingpus zuoYou">
                            <DesignLayoutBut v-model:data-val="getUpdataMastVal" :place="'paddingRight'" />
                        </div>
                    </div>
                    <div class="steeringWheelCont">
                        <div class="swLeft h30 leftBanJiaoBot"></div>
                        <div class="swCentent_s h30 beiJingPingpu shangXia">
                            <DesignLayoutBut v-model:data-val="getUpdataMastVal" :place="'paddingBot'" />
                        </div>
                        <div class="swright h30 rightBanJiaoBot"></div>
                    </div>
                </div>
            </div>
            <div class="swright h140 beiJingPingpus zuoYou">
                <DesignLayoutBut v-model:data-val="getUpdataMastVal" :place="'marginRight'" />
            </div>
        </div>
        <div class="steeringWheelCont">
            <div class="swLeft h30 leftBanJiaoBot"></div>
            <div class="swCentent h30 beiJingPingpu shangXia">
                <DesignLayoutBut v-model:data-val="getUpdataMastVal" :place="'marginBot'" />
            </div>
            <div class="swright h30 rightBanJiaoBot"></div>
        </div>
    </div>
</template>
<style  lang='scss' scoped>
.steeringWheel{
  width:272px;
  height:162px;
  border:1px solid rgba(209,209,209, 1);
  margin:0 auto
}
.steeringWheelCont{
  width:100%;
  display: flex;
}
.swLeft{
  width:30px;
}
.swright{
  width:30px;
}
.swCentent{
  width:210px;
  overflow: hidden;
}
.h140{
    display: flex;
    height:100px;
    text-align:center;
    align-items: center;
    justify-content:center;
}
.h30{
    display: flex;
    display:black;
    height:30px;
    text-align:center;
    align-items: center;
    justify-content:center;
}
.leftBanJiaoTop{
  background: linear-gradient(
    45deg,
    rgba(229,229,229, 1) 50%,
    rgba(209,209,209, 1) 50%,  
  );
}
.rightBanJiaoTop{
  background: linear-gradient(
    315deg,
    rgba(229,229,229, 1) 50%,
    rgba(209,209,209, 1) 50%, 
  );
}
.leftBanJiaoBot{
  background: linear-gradient(
    135deg,
    rgba(229,229,229, 1) 50%,
    rgba(209,209,209, 1) 50%, 
  );
}
.rightBanJiaoBot{
  background: linear-gradient(
    225deg,
    rgba(229,229,229, 1) 50%,
    rgba(209,209,209, 1) 50%, 
  );
}
.beiJingPingpu{
  background-color:rgba(209,209,209, 1)
}
.beiJingPingpus{
  background-color:rgba(229,229,229, 1)
}
.steeringWheel_s{
  width: 202px;
  height: 92px;
  border: 1px solid rgb(209, 209, 209);
}
.swCentent_s{
  width:140px;
}
.h40{
  height:40px;
}
.shangXia{
    cursor:ns-resize;
}
.zuoYou{
    cursor:ew-resize;
}
</style>