99 lines
1.8 KiB
Vue
99 lines
1.8 KiB
Vue
<template>
|
|
<view class="item-doc" :style="{ height: headHeight + 'px' }">
|
|
<view class="item" :style="{ height: headHeight + 'px' }">
|
|
<view class="left">
|
|
<image :src="`/static/applocation/${options.icon}.png`" mode="aspectFit" class="icon"></image>
|
|
<view class="info">
|
|
<view class="title">
|
|
<text class="t">{{ options.name }}</text>
|
|
</view>
|
|
<view class="intro">
|
|
<text class="t">{{ options.intro }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="right" v-if="showSwitch">
|
|
<u-switch :active-value="1" :inactive-value="0" v-model="isOpen" @change="defineEmits(['update:isOpen'])"></u-switch>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, nextTick } from 'vue';
|
|
|
|
const props = defineProps({
|
|
options: {
|
|
type: Object,
|
|
default: {
|
|
name: '标题',
|
|
intro: '说明',
|
|
icon: 'xszk'
|
|
}
|
|
},
|
|
showSwitch: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
});
|
|
|
|
const headHeight = ref(70);
|
|
|
|
const isOpen = defineModel('isOpen', {
|
|
type: [Boolean, String, Number],
|
|
default: 0
|
|
});
|
|
|
|
const emits = defineEmits(['load']);
|
|
|
|
onMounted(() => {
|
|
nextTick(() => {
|
|
emits('load', { height: headHeight.value });
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.item-doc {
|
|
width: 100%;
|
|
}
|
|
.item {
|
|
width: 100%;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 99;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
padding: 20upx 28upx;
|
|
.left {
|
|
display: flex;
|
|
.icon {
|
|
$size: 80upx;
|
|
width: $size;
|
|
height: $size;
|
|
flex-shrink: 0;
|
|
}
|
|
.info {
|
|
display: flex;
|
|
padding-left: 20upx;
|
|
flex-direction: column;
|
|
.title {
|
|
.t {
|
|
font-size: 28upx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.intro {
|
|
.t {
|
|
font-size: 28upx;
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|