一体机放大效果开发

This commit is contained in:
冯辉
2026-03-12 17:10:34 +08:00
parent 0c63175816
commit e7ef23ad5d
83 changed files with 3034 additions and 2899 deletions

View File

@@ -172,8 +172,8 @@ function updateSetting() {
</script>
<style lang="stylus" scoped>
header-height = 88rpx
footer-height = 98rpx
header-height = 132rpx
footer-height = 147rpx
/* 页面容器 */
.container {
@@ -200,7 +200,7 @@ footer-height = 98rpx
position: fixed;
top: 0;
left: 0; /* 如果要右侧弹出改为 right: 0; */
width: 523rpx;
width: 785rpx;
height: 100%;
background: #e7e7e6;
transform: translateX(-100%);
@@ -210,29 +210,29 @@ footer-height = 98rpx
/* 抽屉展开 */
.drawer.open {
box-shadow: 4rpx 0 20rpx rgba(0, 0, 0, 0.2);
box-shadow: 6rpx 0 30rpx rgba(0, 0, 0, 0.2);
transform: translateX(0);
}
.drawer-input-content
margin: 0 28rpx
padding: 0 24rpx
height: 72rpx;
margin: 0 42rpx
padding: 0 36rpx
height: 108rpx;
background: #F6F6F6;
border-radius: 16rpx 16rpx 16rpx 16rpx;
border-radius: 24rpx 24rpx 24rpx 24rpx;
display: flex
align-items: center
justify-content: center
.drawer-input
font-size: 28rpx
font-size: 42rpx
width: 100%
.input-placeholder
font-weight: 500;
font-size: 28rpx;
font-size: 42rpx;
color: #A6A6A6;
.input-search
margin-left: 20rpx
margin-left: 30rpx
/* 抽屉内容 */
.drawer-content
height: 100%
@@ -240,39 +240,39 @@ footer-height = 98rpx
display: flex
flex-direction: column
.drawer-user
border-top: 1rpx solid rgba(0,0,0,.1);
padding: 20rpx 28rpx
border-top: 2rpx solid rgba(0,0,0,.1);
padding: 30rpx 42rpx
display: flex
font-weight: 500;
align-items: center
position: relative
margin-bottom: calc( 32rpx + var(--window-bottom)); /*兼容 IOS<11.2*/
margin-bottom: calc( 32rpx +var(--window-bottom)); /*兼容 IOS>11.2*/
margin-bottom: calc( 48rpx + var(--window-bottom)); /*兼容 IOS<11.2*/
margin-bottom: calc( 48rpx +var(--window-bottom)); /*兼容 IOS>11.2*/
color: #000000
.drawer-user-img
width: 57.2rpx;
height: 57.2rpx
margin-right: 20rpx
margin-right: 30rpx
.drawer-user-setting
width: 48rpx
height: 48rpx
width: 72rpx
height: 72rpx
position: absolute
top: 50%
right: 28rpx
right: 42rpx
transform: translate(0,-50%)
.drawer-title
height: header-height;
line-height: header-height;
padding: 0 52rpx;
padding: 0 78rpx;
color: #333333;
font-size: 32rpx
font-size: 48rpx
font-weight: bold
.chat-scroll
flex: 1
overflow: hidden
.drawer-rows
padding: 0 28rpx;
// border-bottom: 2rpx dashed #e8e8e8
padding: 0 42rpx;
// border-bottom: 3rpx dashed #e8e8e8
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行
@@ -280,24 +280,24 @@ footer-height = 98rpx
color: #A6A6A6;
font-weight: 500;
font-weight: bold;
font-size: 28rpx
padding: 0 24rpx
margin-top: 50rpx
margin-bottom: 16rpx
font-size: 42rpx
padding: 0 36rpx
margin-top: 75rpx
margin-bottom: 24rpx
.drawer-row-list
height: 66rpx;
line-height: 66rpx
font-size: 28rpx
height: 99rpx;
line-height: 99rpx
font-size: 42rpx
overflow: hidden
text-overflow: ellipsis
font-weight: 500;
color: #595959;
padding: 0 24rpx
padding: 0 36rpx
.drawer-row-active
.drawer-row-list:active
color: #333333;
background: #F6F6F6;
border-radius: 16rpx 16rpx 16rpx 16rpx;
border-radius: 24rpx 24rpx 24rpx 24rpx;
/* 主要内容区域 */
@@ -326,14 +326,14 @@ footer-height = 98rpx
display: flex;
align-items: center;
justify-content: space-between
font-size: 32rpx
font-size: 48rpx
color: #000000
padding: 0 30rpx;
padding: 0 45rpx;
font-weight: bold
text-align: center
image
width: 36rpx;
height: 37rpx;
width: 54rpx;
height: 56rpx;
.chatmain-warpper
height: 'calc(100% - %s)' %( header-height + footer-height)
@@ -341,12 +341,12 @@ footer-height = 98rpx
display: block;
box-sizing: border-box;
width: 100%;
border-top: 2rpx solid #F4F4F4;
border-top: 3rpx solid #F4F4F4;
flex: 1
/* 页面被挤压时向右移动 */
.main-content.shift {
margin-left: 500rpx;
margin-left: 750rpx;
}
.chatmain-footer{

View File

@@ -42,12 +42,12 @@ const getBarStyle = (index) => {
display: flex;
justify-content: center;
align-items: center;
padding: 16rpx;
border-radius: 36rpx;
height: calc(102rpx - 40rpx);
gap: 4rpx;
padding: 24rpx;
border-radius: 54rpx;
height: calc(102rpx - 60rpx);
gap: 6rpx;
/* background: linear-gradient(90deg, #9e74fd 0%, #256bfa 100%); */
box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(0, 54, 170, 0.15);
box-shadow: 0rpx 12rpx 60rpx 0rpx rgba(0, 54, 170, 0.15);
}
@keyframes waveAnim {

View File

@@ -224,11 +224,11 @@ onUnmounted(() => {
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
padding: 16rpx;
border-radius: 36rpx;
height: calc(102rpx - 40rpx);
gap: 4rpx;
box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(0, 54, 170, 0.15);
padding: 24rpx;
border-radius: 54rpx;
height: calc(102rpx - 60rpx);
gap: 6rpx;
box-shadow: 0rpx 12rpx 60rpx 0rpx rgba(0, 54, 170, 0.15);
overflow: hidden;
&.active {
opacity: 1;
@@ -237,17 +237,17 @@ onUnmounted(() => {
.wave {
width: 100%;
height: 200rpx;
height: 300rpx;
display: flex;
justify-content: center;
align-items: center;
}
.wave-bar {
width: 6rpx;
min-height: 4rpx;
border-radius: 4rpx;
margin: 0 3rpx;
width: 9rpx;
min-height: 6rpx;
border-radius: 6rpx;
margin: 0 5rpx;
transition: height 0.3s ease-out, background-color 0.2s;
transform-origin: center bottom;
}
@@ -260,19 +260,19 @@ onUnmounted(() => {
bottom: -80rpx;
width: 100%;
text-align: center;
font-size: 32rpx;
font-size: 48rpx;
color: #666;
}
.recording-tip {
font-size: 28rpx;
font-size: 42rpx;
color: #07c160;
}
.recording-time {
font-size: 28rpx;
font-size: 42rpx;
color: #07c160;
margin-top: 10rpx;
margin-top: 15rpx;
}
.cancel-tip {
@@ -280,7 +280,7 @@ onUnmounted(() => {
bottom: -120rpx;
width: 100%;
text-align: center;
font-size: 28rpx;
font-size: 42rpx;
color: #f44336;
}
</style>

View File

@@ -960,7 +960,7 @@ defineExpose({ scrollToBottom, closeGuess, closeFile, changeQueries, handleTouch
.collapse-enter-to,
.collapse-leave-from {
max-height: 400rpx; /* 根据你内容最大高度设定 */
max-height: 600rpx; /* 根据你内容最大高度设定 */
opacity: 1;
}
.msg-filecontent
@@ -968,48 +968,48 @@ defineExpose({ scrollToBottom, closeGuess, closeFile, changeQueries, handleTouch
flex-wrap: wrap
.msg-files
overflow: hidden
margin-right: 10rpx
height: 30rpx
max-width: 201rpx
margin-right: 15rpx
height: 45rpx
max-width: 302rpx
background: #FFFFFF
border-radius: 10rpx
border-radius: 15rpx
display: flex
align-items: center
justify-content: flex-start
padding: 10rpx
padding: 15rpx
color: #000000
margin-bottom: 10rpx
margin-bottom: 15rpx
.msg-file-icon
width: 29rpx
height: 26rpx
padding-right: 10rpx
width: 44rpx
height: 39rpx
padding-right: 15rpx
.msg-file-text
flex: 1
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
color: rgba(96, 96, 96, 1)
font-size: 24rpx
font-size: 36rpx
.msg-files:active
background: #e9e9e9
.guess
padding: 5rpx 0 10rpx 0
padding: 8rpx 0 15rpx 0
.guess-list
padding: 16rpx 24rpx
margin-top: 28rpx
font-size: 24rpx
padding: 24rpx 36rpx
margin-top: 42rpx
font-size: 36rpx
color: #8c8c8c
width: 100%;
border-radius: 20rpx 20rpx 20rpx 20rpx;
border: 2rpx solid #E5E5E5;
font-size: 28rpx;
border-radius: 30rpx 30rpx 30rpx 30rpx;
border: 3rpx solid #E5E5E5;
font-size: 42rpx;
color: #333333;
line-height: 33rpx;
line-height: 50rpx;
.gulist
display: flex
flex-wrap: wrap
position: relative
image-margin-top = 40rpx
image-margin-top = 60rpx
.chat-container
display: flex;
flex-direction: column;
@@ -1020,54 +1020,54 @@ image-margin-top = 40rpx
.chat-background
position: absolute
padding: 44rpx;
padding: 66rpx;
display: flex
flex-direction: column
justify-content: flex-start
align-items: center
width: calc(100% - 88rpx)
width: calc(100% - 132rpx)
position: relative
z-index: 1
.backlogo
width: 313rpx;
height: 190rpx;
width: 470rpx;
height: 285rpx;
.back-rowTitle
height: 56rpx;
height: 84rpx;
font-weight: bold;
font-size: 40rpx;
font-size: 60rpx;
color: #333333;
line-height: 47rpx;
margin-top: 40rpx
line-height: 71rpx;
margin-top: 60rpx
.back-rowText
margin-top: 28rpx
margin-top: 42rpx
width: 100%;
height: 148rpx;
height: 222rpx;
font-weight: 400;
font-size: 28rpx;
font-size: 42rpx;
color: #333333;
line-height: 40rpx
// border-bottom: 2rpx dashed rgba(0, 0, 0, 0.2);
border-bottom: 2rpx solid transparent;
line-height: 60rpx
// border-bottom: 3rpx dashed rgba(0, 0, 0, 0.2);
border-bottom: 3rpx solid transparent;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2) 50%, transparent 50%);
background-size: 10rpx 2rpx; /* 调整虚线宽度和间距 */
background-size: 15rpx 3rpx; /* 调整虚线宽度和间距 */
background-repeat: repeat-x;
background-position: 0 148rpx
background-position: 0 222rpx
.back-rowh3
width: 100%;
font-weight: 500;
font-size: 28rpx;
font-size: 42rpx;
color: #000000;
margin-top: 28rpx
margin-top: 42rpx
.back-rowmsg
width: calc(100% - 32rpx)
margin-top: 24rpx
width: calc(100% - 48rpx)
margin-top: 36rpx
font-weight: 500;
color: rgba(51, 51, 51, 1);
line-height: 28rpx;
font-size: 24rpx
line-height: 42rpx;
font-size: 36rpx
background: rgba(246, 246, 246, 1);
border-radius: 8rpx 8rpx 8rpx 8rpx;
padding: 32rpx 18rpx;
border-radius: 12rpx 12rpx 12rpx 12rpx;
padding: 48rpx 27rpx;
.chat-list {
flex: 1;
@@ -1075,12 +1075,12 @@ image-margin-top = 40rpx
white-space: pre-wrap;
}
.list-content {
padding: 0 44rpx 10rpx 44rpx;
padding: 0 66rpx 15rpx 66rpx;
}
.chat-item {
display: flex;
align-items: flex-start;
margin-bottom: 10rpx;
margin-bottom: 15rpx;
width: 100%;
}
.chat-item.self {
@@ -1095,28 +1095,28 @@ image-margin-top = 40rpx
user-select: text;
-webkit-user-select: text;
.message-markdown
border-radius: 0 20rpx 20rpx 20rpx;
padding: 20rpx 20rpx 20rpx 20rpx;
border-radius: 0 30rpx 30rpx 30rpx;
padding: 30rpx 30rpx 30rpx 30rpx;
background: #F6F6F6;
.message-controll
display: flex
justify-content: space-between
align-items: center
border-top: 2rpx solid #EAEAEA
padding: 24rpx 0 4rpx 0
margin-top: 10rpx
border-top: 3rpx solid #EAEAEA
padding: 36rpx 0 6rpx 0
margin-top: 15rpx
.controll-left
.controll-right
.controll-icon
width: 60rpx;
height: 60rpx;
width: 90rpx;
height: 90rpx;
.messageNull
display: none
.msg-loading{
background: #F6F6F6;
border-radius: 20rpx 0 20rpx 20rpx;
padding: 20rpx;
border-radius: 30rpx 0 30rpx 30rpx;
padding: 30rpx;
width: fit-content;
display: flex;
align-items: center;
@@ -1126,44 +1126,44 @@ image-margin-top = 40rpx
display: flex;
align-items: center;
justify-content: center;
gap: 16rpx;
gap: 24rpx;
}
.loading-text{
font-size: 28rpx;
font-size: 42rpx;
color: #666666;
font-weight: 500;
}
}
.loaded{
padding-left: 20rpx
padding-left: 30rpx
}
.chat-item.self .message {
background: linear-gradient( 225deg, #DAE2FE 0%, #E9E3FF 100%);
border-radius: 20rpx 0 20rpx 20rpx;
padding: 20rpx;
border-radius: 30rpx 0 30rpx 30rpx;
padding: 30rpx;
width: fit-content;
}
.input-area {
padding: 32rpx 28rpx 24rpx 28rpx;
padding: 48rpx 42rpx 36rpx 42rpx;
/* #ifdef H5 */
padding-bottom: calc(24rpx + env(safe-area-inset-bottom) + 70rpx);
padding-bottom: calc(24rpx + env(safe-area-inset-bottom) + 105rpx);
/* #endif */
/* #ifdef MP-WEIXIN */
/* 小程序不支持CSS中的本地图片使用image标签替代 */
padding-bottom: calc(24rpx + env(safe-area-inset-bottom) + 40rpx - 50rpx);
padding-bottom: calc(24rpx + env(safe-area-inset-bottom) + 60rpx - 75rpx);
/* #endif */
position: relative;
background: #FFFFFF;
box-shadow: 0rpx -4rpx 10rpx 0rpx rgba(11,44,112,0.06);
box-shadow: 0rpx -4rpx 15rpx 0rpx rgba(11,44,112,0.06);
transition: height 2s ease-in-out;
z-index: 1001;
}
.ai-tips{
font-size: 24rpx;
font-size: 36rpx;
color: #8c8c8c;
line-height: 33rpx;
margin-top: 18rpx;
line-height: 50rpx;
margin-top: 27rpx;
text-align: center;
}
.input-area::after
@@ -1173,33 +1173,33 @@ image-margin-top = 40rpx
left: 0
width: 100%
z-index: 1
box-shadow: 0rpx -4rpx 10rpx 0rpx rgba(11,44,112,0.06);
box-shadow: 0rpx -4rpx 15rpx 0rpx rgba(11,44,112,0.06);
.areatext{
display: flex;
}
.input {
flex: 1;
border-radius: 5rpx;
min-height: 63rpx;
line-height: 63rpx;
padding: 4rpx 24rpx;
border-radius: 8rpx;
min-height: 95rpx;
line-height: 95rpx;
padding: 6rpx 36rpx;
position: relative
background: #F5F5F5;
border-radius: 60rpx 60rpx 60rpx 60rpx;
border-radius: 90rpx 90rpx 90rpx 90rpx;
}
.input_vio
flex: 1;
border-radius: 5rpx;
min-height: 63rpx;
line-height: 63rpx;
padding: 4rpx 24rpx;
border-radius: 8rpx;
min-height: 95rpx;
line-height: 95rpx;
padding: 6rpx 36rpx;
// position: relative
border-radius: 60rpx 60rpx 60rpx 60rpx;
font-size: 28rpx
border-radius: 90rpx 90rpx 90rpx 90rpx;
font-size: 42rpx
color: #333333
background: #F5F5F5;
text-align: center
font-size: 28rpx
font-size: 42rpx
font-weight: 500
user-select:none;
-webkit-touch-callout:none;
@@ -1212,7 +1212,7 @@ image-margin-top = 40rpx
background: #e8e8e8
.vio_container
background: transparent
padding: 28rpx
padding: 42rpx
text-align: center
-webkit-touch-callout:none;
-webkit-user-select:none;
@@ -1223,26 +1223,26 @@ image-margin-top = 40rpx
position: fixed;
left: 0;
right: 0;
bottom: 160rpx; /* 为底部导航栏留出空间 */
bottom: 240rpx; /* 为底部导航栏留出空间 */
z-index: 9999; /* 确保高于其他元素 */
.record-tip
font-weight: 400;
color: #909090;
text-align: center;
padding-bottom: 16rpx
padding-bottom: 24rpx
.inputplaceholder {
font-weight: 500;
font-size: 24rpx;
font-size: 36rpx;
color: #000000;
line-height: 28rpx;
line-height: 42rpx;
opacity: 0.4
}
.btn-box
margin-left: 12rpx;
width: 70rpx;
height: 70rpx;
margin-left: 18rpx;
width: 105rpx;
height: 105rpx;
border-radius: 50%
background: #F5F5F5;
display: flex
@@ -1251,12 +1251,12 @@ image-margin-top = 40rpx
.send-btn,
.receive-btn
transition: transform 0.5s ease;
width: 38rpx;
height: 38rpx;
width: 57rpx;
height: 57rpx;
.btn-box-round
width: 22rpx
height: 22rpx
border-radius: 4rpx
width: 33rpx
height: 33rpx
border-radius: 6rpx
background: #FFFFFF
.purple
background: linear-gradient( 225deg, #9E74FD 0%, #256BFA 100%);
@@ -1266,87 +1266,87 @@ image-margin-top = 40rpx
}
.area-tips{
font-weight: 400;
font-size: 26rpx;
font-size: 39rpx;
color: #434343;
margin-top: 18rpx
margin-top: 27rpx
}
.area-file
display: grid
width: 100%
grid-template-columns: repeat(3, 1fr)
grid-gap: 20rpx
padding: 20rpx 0 0 0;
grid-gap: 30rpx
padding: 30rpx 0 0 0;
.file-card
display: flex
flex-direction: column
align-items: center
padding: 24rpx 0
padding: 36rpx 0
background: #F5F5F5;
border-radius: 20rpx 20rpx 20rpx 20rpx;
border-radius: 30rpx 30rpx 30rpx 30rpx;
text
font-size: 24rpx
font-size: 36rpx
font-weight: 500
color: rgba(0,0,0,.5)
padding-top: 8rpx
padding-top: 12rpx
.card-img
height: 56rpx
width: 56rpx
height: 84rpx
width: 84rpx
.file-card:active
background: #e8e8e8
.area-uploadfiles
position: absolute
top: -180rpx
width: calc(100% - 30rpx)
width: calc(100% - 45rpx)
background: #FFFFFF
left: 0
padding: 10rpx 0 10rpx 30rpx
box-shadow: 0rpx -4rpx 10rpx 0rpx rgba(11,44,112,0.06);
padding: 15rpx 0 15rpx 45rpx
box-shadow: 0rpx -4rpx 15rpx 0rpx rgba(11,44,112,0.06);
.uploadfiles-scroll
height: 100%
.uploadfiles-list
height: 100%
display: flex
margin-right: 28rpx
margin-right: 42rpx
flex-wrap: nowrap
.file-doc
display: flex
align-items: center
justify-content: flex-start
padding: 16rpx 20rpx 18rpx 20rpx
height: calc(100% - 40rpx)
padding: 24rpx 30rpx 27rpx 30rpx
height: calc(100% - 60rpx)
.doc-icon
width: 60rpx
height: 76rpx
margin-right: 20rpx
width: 90rpx
height: 114rpx
margin-right: 30rpx
.doc-con
flex: 1
width: 0
.file-uploadsend
margin: 10rpx 18rpx 0 0;
margin: 15rpx 27rpx 0 0;
height: 100%
font-size: 24rpx
font-size: 36rpx
position: relative
min-width: 460rpx;
height: 160rpx;
border-radius: 12rpx 12rpx 12rpx 12rpx;
border: 2rpx solid #E2E2E2;
min-width: 690rpx;
height: 240rpx;
border-radius: 18rpx 18rpx 18rpx 18rpx;
border: 3rpx solid #E2E2E2;
overflow: hidden
.file-del
position: absolute
right: 25rpx
top: 18rpx
right: 38rpx
top: 27rpx
z-index: 9
border-radius: 50%
display: flex
align-items: center
justify-content: center
transform: translate(50%, -10rpx)
height: 40rpx
width: 37rpx;
height: 37rpx;
height: 60rpx
width: 56rpx;
height: 56rpx;
background: #4B4B4B;
border: 2rpx solid #FFFFFF;
border: 3rpx solid #FFFFFF;
.file-del:active
background: #e8e8e8
.filename-text
@@ -1354,7 +1354,7 @@ image-margin-top = 40rpx
text-overflow: ellipsis
white-space: nowrap
color: #333333
font-size: 24rpx
font-size: 36rpx
font-weight: 500
max-width: 100%
.filename-size
@@ -1369,14 +1369,14 @@ image-margin-top = 40rpx
.filerow
display: flex
align-items: center
margin-top: 7rpx
margin-top: 11rpx
.row-x
margin: 0 18rpx
height: 20rpx
width: 2rpx
margin: 0 27rpx
height: 30rpx
width: 3rpx
background: rgba(226, 226, 226, .9)
.file-border
width: 160rpx !important;
width: 240rpx !important;
/* 更美观的loading动画 - 兼容H5和小程序 */
@keyframes ai-loading-dots {
@@ -1395,7 +1395,7 @@ image-margin-top = 40rpx
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8rpx;
gap: 12rpx;
width: auto;
height: auto;
background: transparent;
@@ -1408,8 +1408,8 @@ image-margin-top = 40rpx
/* 三个点的样式 - 使用标准CSS语法不使用嵌套 */
.ai-loading view {
display: inline-block;
width: 12rpx;
height: 12rpx;
width: 18rpx;
height: 18rpx;
border-radius: 50%;
background-color: #256BFA;
animation: ai-loading-dots 1.4s ease-in-out infinite both;
@@ -1434,9 +1434,9 @@ image-margin-top = 40rpx
.tab-container {
display: flex;
background: #FFFFFF;
border-bottom: 2rpx solid #F4F4F4;
padding: 0 44rpx;
height: 88rpx;
border-bottom: 3rpx solid #F4F4F4;
padding: 0 66rpx;
height: 132rpx;
align-items: center;
z-index: 10;
}
@@ -1444,11 +1444,11 @@ image-margin-top = 40rpx
.tab-item {
flex: 1;
text-align: center;
font-size: 28rpx;
font-size: 42rpx;
font-weight: 500;
color: #666666;
line-height: 88rpx;
height: 88rpx;
line-height: 132rpx;
height: 132rpx;
position: relative;
transition: all 0.3s ease;
}
@@ -1464,10 +1464,10 @@ image-margin-top = 40rpx
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60rpx;
height: 4rpx;
width: 90rpx;
height: 6rpx;
background: #256BFA;
border-radius: 2rpx;
border-radius: 3rpx;
}
.tab-item:active {

View File

@@ -31,8 +31,8 @@ const fileAbbreviation = computed(() => {
<style scoped>
.file-type-box {
font-weight: 400;
font-size: 24rpx;
font-size: 36rpx;
color: #7b7b7b;
line-height: 28rpx;
line-height: 42rpx;
}
</style>

View File

@@ -1,5 +1,5 @@
<template>
<uni-popup ref="popup" type="bottom" borderRadius="12px 12px 0 0" background-color="#F6F6F6">
<uni-popup ref="popup" type="bottom" borderRadius="12px 18px 0 0" background-color="#F6F6F6">
<view class="feeback">
<view class="titile">反馈</view>
<view class="pop-h3">针对问题</view>
@@ -120,68 +120,68 @@ defineExpose({ open, close });
<style lang="stylus" scoped>
.feeback
padding: 38rpx 32rpx;
padding: 57rpx 48rpx;
.titile
font-weight: 500;
font-size: 36rpx;
font-size: 54rpx;
color: #333333;
line-height: 42rpx;
line-height: 63rpx;
text-align: center;
margin-bottom: 20rpx;
margin-bottom: 30rpx;
.pop-h3
font-weight: 600;
font-size: 32rpx;
font-size: 48rpx;
color: #000000;
line-height: 38rpx;
line-height: 57rpx;
text-align: left;
padding: 8rpx 0
margin-top: 32rpx
padding: 12rpx 0
margin-top: 48rpx
.pop-content
.item
width: fit-content;
height: 80rpx;
height: 120rpx;
background: #E8EAEE;
border-radius: 12rpx 12rpx 12rpx 12rpx;
border-radius: 18rpx 18rpx 18rpx 18rpx;
text-align: center;
line-height: 80rpx;
padding: 0 36rpx
border: 2rpx solid transparent;
line-height: 120rpx;
padding: 0 54rpx
border: 3rpx solid transparent;
display: inline-block
margin-right: 28rpx
margin-top: 28rpx
margin-right: 42rpx
margin-top: 42rpx
.active
border: 2rpx solid #256BFA;
border: 3rpx solid #256BFA;
color: #256BFA;
.supplement
height: 200rpx;
height: 300rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
margin-top: 28rpx
padding: 20rpx 24rpx
border-radius: 30rpx 30rpx 30rpx 30rpx;
margin-top: 42rpx
padding: 30rpx 36rpx
.btn
height: 90rpx;
height: 135rpx;
background: #256BFA;
border-radius: 12rpx 12rpx 12rpx 12rpx;
border-radius: 18rpx 18rpx 18rpx 18rpx;
font-weight: 500;
font-size: 32rpx;
font-size: 48rpx;
color: #FFFFFF;
line-height: 90rpx;
line-height: 135rpx;
text-align: center;
margin-top: 62rpx
margin-top: 93rpx
.close-btn
position: absolute;
right: 32rpx;
top: 32rpx;
width: 56rpx;
height: 56rpx;
right: 48rpx;
top: 48rpx;
width: 84rpx;
height: 84rpx;
.close-btn::before
position: absolute;
left: 50%;
top: 50%;
content: '';
width: 4rpx;
height: 28rpx;
border-radius: 2rpx
width: 6rpx;
height: 42rpx;
border-radius: 3rpx
background: #5A5A68;
transform: translate(50%, -50%) rotate(-45deg) ;
.close-btn::after
@@ -189,9 +189,9 @@ defineExpose({ open, close });
left: 50%;
top: 50%;
content: '';
width: 4rpx;
height: 28rpx;
border-radius: 2rpx
width: 6rpx;
height: 42rpx;
border-radius: 3rpx
background: #5A5A68;
transform: translate(50%, -50%) rotate(45deg)
</style>