fe-manage/src/components/drawers/NoticePub.vue

<!--发布公告-->
<template>
    <div class="split"></div>
    <div class="noticeTitle">
        <div class="notitle"><span class="titlespan">公告</span></div>
        <div class="switch"><a-switch v-model:checked="noticeChecked" size="small"/><span style="margin-left: 16px;">开启</span></div>
        <template v-if="noticeChecked">
            <p>公告内容</p>
            <a-textarea v-model:value="noticeContent" :maxlength="150" placeholder="公告信息最多输入150个字" style="margin-top: -10px;height: 120px;"/>
            <div class="publish"><div class="iconPub"></div><div class="btnText">发布</div></div>
        </template>
        
       
      </div>
</template>s
<script>
import { reactive,toRefs} from "vue";
export default {
    name: "NoticePub",
    setup(){
      const state = reactive({
      noticeChecked: true,
    });
    return{
      ...toRefs(state),
    }
    }
   
}
</script>
<style lang="scss">
    .noticeTitle {
        margin-left: 32px;
        margin-right: 32px;
        padding-top: 20px;
        .notitle{
            height: 55px;
            border-bottom:1px solid #ededed;
            position: relative;
            .titlespan{
                font-size: 18px;
                position: absolute;
                left: 0;
                bottom: 0px;
             }
        }
        .switch{
            display: flex;
            align-items: center;
            height: 90px;
        }

        .publish {
            width: 100px;
            height:38px;
            background: rgb(64, 158, 255);
            border-radius: 8px;
            border: 1px solid rgba(64, 158, 255, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            float: right;
            margin-top: 24px;
            margin-bottom: 60px;
            margin-right: 20px;
            cursor: pointer;
            .iconPub {
                width: 15px;
                height: 15px;
                background-image: url(@/assets/images/taskpage/pub0.png);
                background-size: 100% 100%;
                color: rgb(255, 255, 255);
            }
            .btnText {
                font-size: 14px;
                font-weight: 400;
                color: rgb(255, 255, 255);
                line-height: 36px;
                margin-left: 5px;
            }
         }
    }

</style>