样式更新

zhaoxing

2023-05-17 2e0814719b06ae7b86dfa48093ab4edb6eaad6b3

 pages/tab/assistant.vue

@@ -2,22 +2,23 @@
   <view class="container">
      <view class="form">
         <image src="/static/bg_ai_assistant_title.png" class="banner"></image>
			
      </view>
      <u-transition :show="true" mode="slide-right">
         <view class="tool_list">
            <view class="group_tool_wrap" v-for="item in models" :key="item.assistant_id" @click="handleJump(item)">
               <view class="tool_wrap">
                  <u--image :showLoading="true" :src="`${setting_data.base_url+item.icon}`" width="100rpx" height="100rpx" class="tool_icon"></u--image>
                  <u--image :showLoading="true" :src="`${setting_data.base_url+item.icon}`" width="112rpx" height="112rpx" class="tool_icon"></u--image>
                  <view class="tool_info">
                     <view class="tool_name">
                        {{item.title}}
                        <view class="label_wrap" style="background-color: #FF9900" v-if="item.tag">{{item.tag}}</view>
                        <view class="label_wrap" v-else></view>
                        <view class="tool_name_l">
                           {{item.title}}
                           <view class="label_wrap" style="background-color: #FF9900" v-if="item.tag">{{item.tag}}</view>
                           <view class="label_wrap" v-else></view>
                        </view>
                        <span>去提问</span>
                     </view>
                     <view class="tool_hint">{{item.description}}</view>
                  </view>
                  <u-icon name="arrow-right" color="#848B9E" size="16"></u-icon>
               </view>
            </view>
         </view>
@@ -231,20 +232,20 @@
   }

   .tool_list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 0 32rpx;
      align-items: stretch;
      padding-bottom: 60rpx;

      .group_tool_wrap {
         align-items: center;
         justify-content: space-between;
         min-height: 168rpx;
         width: 100%;
         border-radius: 32rpx;
         background-color: #30324f;
         margin-top: 32rpx;
         display: flex;
         border-radius: 24rpx;
         background: url('@/static/img/box-bg.png') #fbfbfb no-repeat;
         background-position: left top;
         background-size: 180rpx 180rpx;
         margin-top: 24rpx;
         align-items: center;

         .label_wrap {
@@ -256,33 +257,50 @@
            border-radius: 3px;
            color: #fff;
            font-size: 20rpx;
            font-weight: 500;
            font-weight: normal;
            text-align: center;
         }

         .tool_wrap {
            box-sizing: border-box;
            width: 100%;
            display: flex;
            padding: 32rpx;
            align-items: center;

            .tool_info {
               flex: 1;
               width: calc(100vw - 132px);

               .tool_name {
                  font-size: 30rpx;
                  display: flex;
                  font-size: 40rpx;
                  font-weight: 600;
                  color: #fff;
                  color: #08073F;
                  align-items: center;
                  .tool_name_l{
                     flex: 1;
                     display: flex;
                     align-items: center;
                  }
						
                  & > span{
                     width: 108rpx;
                     height: 48rpx;
                     line-height: 46rpx;
                     background: #2F2DDC;
                     color: #fff;
                     text-align: center;
                     font-size: 26rpx;
                     font-weight: normal;
                     border-radius: 8rpx;
                  }
               }

               .tool_hint {
                  display: -webkit-box;
                  margin: 12rpx 12rpx 0 0;
                  font-size: 26rpx;
                  font-weight: 500;
                  color: #93949d;
                  width: calc(100vw - 140px);
                  color: #5C738C;
						
                  overflow: hidden;
                  -webkit-box-orient: vertical;
                  word-break: break-all;
@@ -295,6 +313,8 @@

            .tool_icon {
               margin-right: 24rpx;
               border-radius: 50%;
               overflow: hidden;
            }
         }
      }
@@ -305,4 +325,7 @@
      width: 100vw;
      height: calc(100vw * 0.324);
   }
   page {
     background: #fff;
   }
</style>