一体机放大效果开发
This commit is contained in:
@@ -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{
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user