样式修改

zhaoxing

2023-05-13 9563b1b03728efbccf66c59d4deb83c4a83ebafc

 pages/tab/assistant.vue

@@ -21,14 +21,17 @@
      <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="label_wrap" style="background-color: #FF9900" v-if="item.tag">{{item.tag}}</view>
               <view class="label_wrap" v-else></view>
               <view class="tool_wrap">
                  <u--image :showLoading="true" :src="`${setting_data.base_url+item.icon}`" width="100rpx" height="100rpx" class="tool_icon"></u--image>
                  <view class="tool_info">
                     <view class="tool_name">{{item.title}}</view>
                     <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>
                     <view class="tool_hint">{{item.description}}</view>
                  </view>
                  <u--image :showLoading="true" :src="`${setting_data.base_url+item.icon}`" width="80rpx" height="80rpx"></u--image>
                  <u-icon name="arrow-right" color="#848B9E" size="16"></u-icon>
               </view>
            </view>
         </view>
@@ -249,57 +252,66 @@
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 0 20rpx;
      padding: 0 32rpx;
      align-items: stretch;
      padding-bottom: 60rpx;

      .group_tool_wrap {
         min-height: 168rpx;
         width: 347rpx;
         border-radius: 10rpx;
         width: 100%;
         border-radius: 32rpx;
         background-color: #30324f;
         margin-top: 20rpx;
         margin-top: 32rpx;
         align-items: center;

         .label_wrap {
            display: flex;
            display: inline-block;
            margin-left: 8rpx;
            width: 60rpx;
            height: 32rpx;
            line-height: 32rpx;
            border-radius: 3px;
            color: #fff;
            font-size: 20rpx;
            font-weight: 500;
            justify-content: center;
            align-items: center;
            position: relative;
            left: 287rpx;
            z-index: 1;
            text-align: center;
         }

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

            .tool_info {
               flex: 1;

               .tool_name {
                  font-size: 28rpx;
                  font-size: 30rpx;
                  font-weight: 600;
                  color: #fff;
               }

               .tool_hint {
                  margin-top: 15rpx;
                  font-size: 24rpx;
                  display: -webkit-box;
                  margin: 12rpx 12rpx 0 0;
                  font-size: 26rpx;
                  font-weight: 500;
                  color: #93949d;
                  width: calc(100vw - 140px);
                  overflow: hidden;
                  -webkit-box-orient: vertical;
                  word-break: break-all;
                  text-overflow: ellipsis;
                  -webkit-line-clamp: 2;
                  line-clamp: 2;
                  text-align: justify;
               }
            }

            image {
               margin-left: 10rpx;
            .tool_icon {
               margin-right: 24rpx;
            }
         }
      }
@@ -307,13 +319,13 @@
</style>
<style scoped>
   page {
      background-color: #070d1d;
      background-color: #15151f;
      box-sizing: border-box;
      letter-spacing: 0;
      word-wrap: break-word;
   }
   .banner{
      width: 100vw;
      height: calc(100vw * 0.433333);
      height: calc(100vw * 0.324);
   }
</style>