81 lines
2.2 KiB
Vue
81 lines
2.2 KiB
Vue
|
<script setup>
|
||
|
|
import { ref, computed } from 'vue'
|
||
|
|
import { useThemeStore } from "@/store/useThemeStore";
|
||
|
|
import { useAppStore } from '@/store/useAppStore'
|
||
|
|
|
||
|
|
const themeStore = useThemeStore()
|
||
|
|
const appStore = useAppStore()
|
||
|
|
const scrollHeight = computed(() => {
|
||
|
|
return appStore.windowInfo.screenHeight - appStore.windowInfo.statusBarHeight - 50
|
||
|
|
})
|
||
|
|
const questions = ref([
|
||
|
|
{
|
||
|
|
id: 1,
|
||
|
|
question: 'What is the capital of France?',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 2,
|
||
|
|
question: 'Which planet is known as the Red Planet?',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 3,
|
||
|
|
question: 'What is the largest mammal in the world?',
|
||
|
|
}
|
||
|
|
])
|
||
|
|
const inputVal = ref('')
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<mobile-custom-layout title="Self-service Customer" bgColor="#2F0101"
|
||
|
|
:headBgColor="themeStore.theme.bgColor" :paddingTop="appStore.headerStyle.height">
|
||
|
|
<template #head-right>
|
||
|
|
<view>
|
||
|
|
<theme-image src="@/static/account/customer_head.png" class="icon-kf-head"></theme-image>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<scroll-view scroll-y class="w-full p-2 scroll" :style="{ height: scrollHeight + 'px' }">
|
||
|
|
12
|
||
|
|
</scroll-view>
|
||
|
|
<view class="w-full input-line safe-area">
|
||
|
|
<view class="w-full flex items-center input-content">
|
||
|
|
<view class="flex-1 p-1 input-box">
|
||
|
|
<input type="text" v-model="inputVal" class="w-full ft12" placeholder="Please enter your question" />
|
||
|
|
</view>
|
||
|
|
<view class="submit-btn ml-2 ft13 flex-center">Send</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</mobile-custom-layout>
|
||
|
|
</template>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.scroll{
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
.icon-kf-head{
|
||
|
|
width: 46rpx;
|
||
|
|
height: 46rpx;
|
||
|
|
}
|
||
|
|
.input-line {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
z-index: 1000;
|
||
|
|
background-color: #280000;
|
||
|
|
|
||
|
|
.input-content {
|
||
|
|
height: 120rpx;
|
||
|
|
padding: 0 24rpx;
|
||
|
|
|
||
|
|
.input-box{
|
||
|
|
height: 56rpx;
|
||
|
|
background-color: #5A0107;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
.submit-btn{
|
||
|
|
height: 56rpx;
|
||
|
|
width: 100rpx;
|
||
|
|
background-color: #5A0107;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|