修改样式

zhaoxing

2023-05-11 3a4ec8da75f6f9eaf9571334319388455c61c65b

 pages/index/write.vue

@@ -16,18 +16,18 @@
               <!-- <button class="cu-btn bg-gradual-orange round">我的创作</button> -->
            </view>
         </view>
         <view class="cu-bar bg-white text-orange">
         <view class="cu-bar text-cyan">
            <view class="action">
               <text class="icon-titles text-orange"></text>
               <text class="text-cyan"></text>
               <text class="text-lg text-bold">创作类型</text>
            </view>
         </view>
         <view class="padding-lr">
            <u-input v-model="title" placeholder="输入需要AI为你创作的文本类型,如:小红书文案" />
         </view>
         <view class="cu-bar bg-white text-orange padding-right">
         <view class="cu-bar text-cyan padding-right">
            <view class="action">
               <text class="icon-titles text-orange"></text>
               <text class="text-cyan"></text>
               <text class="text-lg text-bold">主要内容</text>
            </view>
            <button @click="submit" class="cu-btn line-blue radius text-bold">提交</button>
@@ -37,10 +37,10 @@
               placeholder="输入需要AI为你创作的文本主要内容及要求,如:一个关于戒指的小红书产品文案，要求以网红种草博主的口吻，博主身份为网红女生，文案中最好多带一些emoji表情"
               :adjustPosition="false"></u--textarea>
         </view>
         <view class="cu-bar bg-white text-orange padding-right">
         <view class="cu-bar text-cyan padding-right">
            <view class="action">
               <text class="icon-titles text-orange"></text>
               <text class="text-lg text-bold">🤖AI创作</text>
               <text class="text-cyan"></text>
               <text class="text-lg text-bold">AI创作</text>
            </view>
            <view class="flex" v-if="answerStatus == 2">
               <button class="cu-btn line-black radius text-bold">重新生成</button>
@@ -53,20 +53,20 @@
               <zero-markdown-view style="padding: 0;" :markdown="answer"></zero-markdown-view>
            </view>
         </view>
         <view class="cu-bar bg-white text-orange">
         <view class="cu-bar text-cyan">
            <view class="action">
               <text class="icon-titles text-orange"></text>
               <text class="text-cyan"></text>
               <text class="text-lg text-bold">常用模板</text>
            </view>
         </view>
         <view class="padding-lr">
            <view v-for="item in write_template" :key="item.write_template_id">
               <view class="flex align-center text-orange text-df">
               <view class="flex align-center text-cyan text-df">
                  <view class="icon-tagfill"></view>
                  <view class="text-bold">{{item.title}}</view>
               </view>
               <view v-if="item.children.length > 0" class="flex flex-wrap justify-between align-center padding-tb-sm">
                  <view v-for="child in item.children" :key="child.write_template_id"  class="template-card bg-orange light">
                  <view v-for="child in item.children" :key="child.write_template_id"  class="template-card light">
                     <view class="write-title"> {{child.title}} </view>
                     <view class="write-sub-title"> {{child.description}} </view>
                  </view>
@@ -325,8 +325,8 @@


   .template-card {
      /* background: #f5f8f7; */
      border-radius: 10px;
      background: #30324F;
      border-radius: 24rpx;
      padding: 15px;
      width: 48%;
      margin-bottom: 15px;
@@ -338,15 +338,15 @@
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 9px;
      /* color: #000; */
      color: #fff;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
   }

   .write-sub-title {
      /* color: #8f9ca2; */
      font-size: 12px;
      color: #93949d;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
@@ -373,10 +373,10 @@
   }

   .anser-area {
      box-shadow: 0 0 10px 5px hsla(0, 0%, 62%, .21176470588235294);
      margin-top: 20rpx;
      border-radius: 5px;
      padding: 8px;
      color: #93949D;
      background: #30324F;
      border-radius: 32rpx;
      padding: 24rpx;
      min-height: 120px;
   }