yicangzongtai_app_240321/pages/research/recommend/release.vue

<template>
  <view class="release">
    <!-- 发布页面 -->
    <navbar :config="config" id="noticePapup" backColor="#666"></navbar>
    <view class="" id="noticePapup">

    </view>
    <view v-if="stap == -1">
      <view class="article">
        <view class="symbol" @click="showitem">
          <!-- 要改成iconfont -->
          <view class="addsymbol"><text class="plus"> + </text></view>
          <view class="content"> 发布文章或者视频 </view>
        </view>
      </view>
      <view class="addimage" v-if="type != null" style="display: flex;padding-bottom:0">
        <view class="imagefont" style="margin-bottom:0"> 发布类型： </view>
        <view>
          <text v-if="type == 0">文章</text>
          <text v-if="type == 1">视频</text>
        </view>
      </view>
      <view class="contenttitle">
        <textarea class="title" v-model="title" placeholder-class="titla-plac" placeholder="请输入您发布的内容标题"
          placeholder-style="color: #cccccc;font-size:28rpx;font-weight:400;display: flex;align-items: center;" @input="onchangeText"
          maxlength="20"></textarea>
      </view>

      <view class="remind">
        <view class="tips"> 提示 </view>
        <view class="tipsone"> 1、标题是必填的，需要您认真填写哦~ </view>
        <view class="tipsone"> 2、好的标题是吸引用户关注的第一步。 </view>
      </view>


      <view class="addimage">
        <view class="imagefont"> 封面图 </view>
        <unloadimg imgCount="1" :imgArr="identty_images" :type="upimgtype" url="" @result="resultUrlone">
        </unloadimg>
      </view>
    </view>
    <!--   -->
    <view class="showhidden" v-if="stap == 1">
      <view>
        <image :src="coverImg" mode="widthFix" class="identty_images" />
      </view>

      <view class="u-font32 u-ml30 u-mt30 u-bold">
        {{title}}
      </view>
      <view class="line-2 u-ml30 u-mt30">
        <!-- 灰色的8rpx的线 -->
      </view>
      <view class="copywriting">
        <view class="copywritingitem"> 请输入简介文案 </view>
        <view class="texterea">
          <textarea v-model="content" class="textereaitem" placeholder="请输入简介文案"
            placeholder-style="color: #cccccc;padding:'22rpx 20rpx';font-size:24rpx;" maxlength="100"></textarea>
        </view>
      </view>
      <view class="addimage" v-if="type == 0">
        <view class="imagefont"> 添加图片 </view>
        <releaseImg imgCount="10" :imgArr="images" :type="upimgtype" @result="resultUr" uploadImgCount='10'>
        </releaseImg>
      </view>
      <view :style="videoFalge">
        <view class="addimage" v-if="type == 1">
          <view class="imagefont"> 添加视频 </view>
          <unloadVideo :videoSrc="media_address" @resultVideo="resultVideo"></unloadVideo>
        </view>
      </view>
      <view class="onesolid"> </view>
      <view class="speak">
        <view class="addspeak" @click="addProduct()">
          <view class="peakleft">
            添加商品 <text class="six">（选填，一次最多添加6件商品）</text>
          </view>
          <view class="peakright">
            <text class="iconfont u-ml15 u-font24 u-999">&#xe6c7;</text>
          </view>
        </view>
        <view class="onesolid">
          <!-- 1像素的线 -->
        </view>
        <view class="speaklist">
          <view class="listcontent" v-for="(item, index) in backgroundoptio" :key="index">
            <view class="img">
              <image :src="item.cover" mode=""></image>
            </view>
            <view class="same">
              <view class="item">
                # {{ item.title }}
              </view>

              <view class="num">
                <rich-text :nodes="$mUtil.priceBigSmall(item.min_sale_price)"></rich-text>
              </view>
            </view>
            <view class="del" @click="deleteoption(index, item)"> × </view>
          </view>
        </view>
        <!-- 8像素灰色的线 -->
        <view class="eightborder"> </view>
        <view class="lasttopic" @click="showSpeak">
          <view class="addtopic">
            添加话题
            <text class="six">（选填，一次最多2个话题）</text>
          </view>
          <view class="addtopicright">
            <text class="iconfont u-ml15 u-font24 u-999">&#xe6c7;</text>
          </view>
        </view>
        <!-- 1像素灰色的线 -->
        <view class="onesolid"> </view>
        <view class="hotsale">
          <view class="item" v-for="(item, index) in themeList" :key="index">
            # {{ item.title }}
            <view class="itemdel" @click="deleteItem(index)"> × </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 底部 -->
    <!--  -->
    <view class="nextstep" v-if="stap == 1">
      <view class="reward"> 发布、分享均能获得积分奖励 ！</view>
      <button class="btn" @click="gostep()">发送</button>
    </view>
    <view class="nextstep" v-if="stap == -1">
      <view class="reward"> 发布、分享均能获得积分奖励 ！</view>
      <button class="btn" @click="goNext()">下一步</button>
    </view>

    <!-- 底部弹出层 -->
    <uni-popup ref="popup" type="bottom" :maskClick="false">
      <view class="showpopup">
        <view class="top">
          <view class="addedspeak">
            <view class="item"> 添加话题 </view>
            <view class="line"> </view>
          </view>
          <view class="determine" @click="determineChoice()"> 确定 </view>
        </view>
        <view class="selected">
          <view class="selecteditem"> 已选 </view>
          <view class="tobeselected">
            <view class="block" v-for="(item, index) in themeList" :key="index" @click="deleteItem(item, index)">
              #{{ item.title }}
              <view class="rederror"> × </view>
            </view>
          </view>
          <view class="allspeak">
            <view class="allspeaktitle"> 所有话题 </view>
            <view class="allspeakitem">
              <view class="item" v-for="(item, index) in speakData" :key="index" @click="switchStyle(item, index)"
                :class="{'active':themeList.findIndex(e=>{return e.id == item.id})>-1}">
                # {{ item.title }}
              </view>
            </view>
          </view>
        </view>
        <!-- 灰格子 -->
        <view class="greygrid"> </view>
        <view class="cancel" @click="cancelChoice()"> 取消 </view>
      </view>
    </uni-popup>
    <!-- 底部弹出框 -->
    <!-- 中间弹出框 -->
    <uni-popup ref="popuptwo" type="center">
      <view class="final">
        <view class="topmargin"> </view>
        <view class="image">
          <image :src="imgUrl+'/workingday.png'" mode=""></image>
        </view>
        <view class="waitfor"> 等待审核 </view>
        <view class="content">
          预计1-3个工作日， 届时会有站内信通知， 或是在个人中心查看审核状态！感谢您使用平台
        </view>

        <view class="close" @click="hiddenExamine()"> 关闭 </view>
        <view class="bottommargin"> </view>
        <view class="rightclose" @click="hiddenExamine()">
          <image :src="imgUrl+'/release-close.png'" mode=""></image>
        </view>
        <!-- 右上角× -->
      </view>
    </uni-popup>
    <uni-popup ref="popupthree" type="bottom">
      <view class="showpopup">
        <view class="top">
          <view class="addedspeak">
            <view class="item" style="border-radius: 8rpx;"> 选择类型</view>
            <view class="line"> </view>
          </view>
          <!-- <view class="determine" @click="determineChoice()"> 确定 </view> -->
        </view>
        <view class="addtype">



          <view class="addimg" @click="clickAddimg">
            添加图片
          </view>
          <view class="addvideo" @click="clickAddVideo">
            添加视频
          </view>
        </view>
        <!-- 灰格子 -->
        <view class="greygrid"> </view>
        <view class="cancel" @click="noType()"> 取消 </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import unloadimg from "../../../components/uploadImg/imgUpload.vue";
  import releaseImg from "../../../components/uploadImg/releaseImg.vue"
  import unloadVideo from "../../../components/uploadImg/unloadVideo.vue";
  export default {
    data() {
      return {
        config: {
          back: true, //false是tolbar页面 是则不写
          title: "发布",
          color: "#1A1A1A",
          switchnextstep: true, //切换底部样式
          //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
          backgroundColor: [1, "#fff"],
          // fixed: false,
          
        },

        //横向滚动块
        backgroundoptio: [],
        content: null,
        bottomlist: [],
        replaceblock: true,
        title: null,
        content: null, //内容
        speakData: [],
        smallBox: [],
        topInput: "",
        type: null,
        identty_images: [],
        coverImg: "",
        upimgtype: "other",
        stap: -1,
        themeList: [], //选择的主题列表
        images: [], //上传的图片
        media_address: null,
        duration: null,
        size: null,
        videoFalge: {
          display: "block"
        },
        view: null,
        view2: null,
        placeHolder: '1111',
		imgUrl: this.$mConfig.staticUrl
      };
    },
    onLoad(options) {
      // const subNvue = uni.getSubNVueById("noticePapup");
      // this.view0 = new plus.nativeObj.View('test0', {
      // 	top: '0px',
      // 	left: '0px',
      // 	height: '15px',
      // 	width: '100%'
      // });
      // this.view0.drawRect({
      // 	color: '#0B844A'
      // }, {
      // 	top: '0px',
      // 	left: '0px',
      // 	width: '100%',
      // 	height: '100%'
      // });
      // subNvue.show()
      // this.view = new plus.nativeObj.View('test', {
      // 	top: '0px',
      // 	left: '0px',
      // 	height: '74px',
      // 	width: '100%'
      // });
      //在这个view上面画一个矩形，填充白色背景，color: #fff,铺满全屏。	
      // this.view.drawRect({
      // 	color: '#0B844A'
      // }, {
      // 	top: '0px',
      // 	left: '0px',
      // 	width: '100%',
      // 	height: '100%'
      // });

      // this.view.drawText('发布', {
      // 	top: '0px',
      // 	left: '0px',
      // 	width: '100%',
      // 	height: '100%'
      // }, {
      // 	align: 'center',
      // 	color: '#fff'
      // });
      //z这个view上面画一个input输入框，input输入框只能设置特定的属性，也不能设置背景。想要设置背景，就才有上面的方法。
      // this.view.drawInput({
      // 	top: '8px',
      // 	left: '35px',
      // 	width: '280px',
      // 	height: '30px'
      // }, {
      // 	type: 'text',
      // 	placeholder: this.placeHolder,
      // 	borderColor: '#eee',
      // 	background: 'red',
      // 	borderRadius: '15px',
      // 	onFocus: () => {
      // 		//监听输入框的聚焦事件。
      // 		this.hideTig()
      // 	}
      // }, 'input');
      //给input输入框填充背景
      // this.view.drawRect({
      // 	color: '#eee',
      // 	borderWidth: '2px',
      // 	radius: '14px'
      // }, {
      // 	top: '8px',
      // 	left: '15px',
      // 	width: '300px',
      // 	height: '30px'
      // });
      //这个是左边的按钮，因为没有提供画按钮的方法，只能画一个view填充上文字。来实现按钮		
      // this.view2 = new plus.nativeObj.View('aps', {
      // 	bottom: '23px',
      // 	zIndex: '10',
      // 	right: '20px',
      // 	height: '30px',
      // 	width: '60px'
      // });
      // //给view填充背景。
      // this.view2.drawRect({
      // 	color: 'rgba(91,183,28,1)',
      // 	borderWidth: '2px',
      // 	radius: '14px'
      // }, {
      // 	top: '0px',
      // 	left: '0px',
      // 	width: '100%',
      // 	height: '100%'
      // });
      //给view加上文字
      // this.view2.drawText('发送', {
      // 	top: '0px',
      // 	left: '0px',
      // 	width: '100%',
      // 	height: '100%'
      // }, {
      // 	align: 'center',
      // 	color: '#fff'
      // });
      // //给按钮加上点击事件
      // this.view2.addEventListener("click", this.fs, false)
      // //让view显示出来
      // this.view.show()
      // this.view2.show()
    },
    onUnload() {
      uni.removeStorageSync("ischeckbox")
    },
    onShow() {
      let box = uni.getStorageSync("ischeckbox");
      this.backgroundoptio = box;
      this.getTheme();
    },
    components: {
      unloadimg,
      unloadVideo,
      releaseImg
    },
    methods: {
      getTheme() {
        this.$http.get("/opus/theme/list", this.params).then((res) => {
          if (res && res.code == 200) {
            this.speakData = res.list;
          }
        });
      },
      goNext() {
        if (this.type == null) {
          this.$mUtil.toast("请选择需要发布的类型");
          return false;
        }
        if (this.title == null) {
          this.$mUtil.toast("请输入您要发布的标题");
          return false;
        }
        if (this.identty_images.length == 0 || this.identty_images == null) {
          this.$mUtil.toast("请上传封面图");
          return false;
        }
        this.stap = 1;
      },

      resultUrlone(e) {
        this.identty_images = e;
        this.coverImg = this.identty_images[0]
      },
      resultUr(e) {
        this.images = e;
      },
      resultVideo(e) {

        (this.media_address = e.url),
        (this.size = Number(e.size));
        this.duration = Number(e.duration.toFixed(0));
      },
      //删除底部的块
      deleteItem(index) {
        this.bottomlist.splice(index, 1);
        console.log(index);
      },
      //点击删除
      deleteoption(index) {
        this.backgroundoptio.splice(index, 1);
        uni.setStorageSync("ischeckbox", this.backgroundoptio)
      },
      //确定按钮现在先写到关闭，后面再写提交数据
      determineChoice() {
        this.videoFalge.display = "block"
        this.$refs.popup.close();
      },
      //关闭审核
      hiddenExamine() {
        this.$refs.popuptwo.close();

        setTimeout(() => {
          uni.navigateBack({
            delta: 1
          });
        }, 1000);
      },
      //清楚弹出框
      cancelChoice() {
        this.videoFalge.display = "block"

        this.$refs.popup.close();
      },
      //点击添加
      switchStyle(item, index) {
        if (this.themeList.some((val) => val.id == item.id)) {
          this.$mUtil.toast(item.title + "已经添加了，请重新选择");
          return false;
        }
        if (this.themeList.length >= 2) {
          this.$mUtil.toast("最多添加两个话题");
        } else {
          this.themeList.unshift(item);
          let newArr = Array.from(new Set(this.themeList));
          this.themeList = newArr;

        }

        //  this.speakData.splice(index, 1);
      },
      deleteItem(item, index) {
        this.themeList.splice(index, 1);
      },
      showSpeak(e) {
        this.videoFalge.display = "none"
        this.$refs.popup.open();
        console.log(e)
      },
      addProduct() {
        uni.navigateTo({
          url: "./list",
        });
      },
      onchangeText(e) {
        //input框里的内容变更切换样式
        this.conent = e.detail.value;

        if (e.detail.cursor >= 1) {
          // nextstep.className = "nextsteptwo"
          this.replaceblock = false;
          this.topInput = e.detail.value;
        } else {
          // nextsteptwo.className = "nextstep"
          this.replaceblock = true;
        }
      },
      //前往下一步
      gostep() {

        if (this.content == null) {
          this.$mUtil.toast("请输入简介文案");
          return false;
        }
        if (this.type == 0) {
          if (this.images.length == 0 || this.images == null) {
            this.$mUtil.toast("请添加图片");
            return false;
          }
		  if (this.images.length > 10) {
		    this.$mUtil.toast("图片上传数量超过最大限制");
		    return false;
		  }
        }
        //视频
        if (this.type == 1) {
          if (this.media_address == null) {
            this.$mUtil.toast("请添加视频");
            return false;
          }
        }
        //话题管理
        // 	   let theme_ids: this.themeList.map((val) => val.id),
        //图文
        // let 	goods_ids: this.backgroundoptio.map((val) => val.id),



        let params = {
          title: this.title,
          cover: this.identty_images.join(","),
          opus_type: this.type,
          content: this.content,
        };
        if (Array.isArray(this.backgroundoptio)) {
          params.goods_ids = this.backgroundoptio.map((val) => val.id)
        }
        if (Array.isArray(this.themeList)) {
          params.theme_ids = this.themeList.map((val) => val.id)
        }
        if (this.type == 0) {
          if (this.images.length == 0 || this.images == null) {
            this.$mUtil.toast("请添加图片");
            return false;
          }
          params.images = this.images.join(",");
        }
        //视频
        if (this.type == 1) {
          if (this.media_address == null) {
            this.$mUtil.toast("请添加视频");
            return false;
          }
          (params.media_address = this.media_address),
          (params.media_size = this.size),
          (params.duration = this.duration);
        }
        this.$http.post("/opus/add", params).then(res => {

          if (res && res.code == 200) {
            uni.removeStorageSync("ischeckbox");
            this.$refs.popuptwo.open();
          }

        });
      },
      showitem(e) {
        // uni.showActionSheet({
        // 	itemList: ["添加图片", "添加视频"],
        // 	success: (res) => {
        // 		console.log(res.tapIndex)
        // 		this.type = res.tapIndex;
        // 		this.$mUtil.toast("类型选择成功")
        // 	},
        // 	fail: (res) => {
        // 		console.log(res.errMsg);
        // 	},
        // });
        this.$refs.popupthree.open();
      },
      clickAddVideo() {
        this.type = 1
        this.$refs.popupthree.close()
        this.$mUtil.toast("类型选择成功")
      },
      clickAddimg() {
        this.type = 0
        this.$refs.popupthree.close()
        this.$mUtil.toast("类型选择成功")
      },
      noType() {
        this.$refs.popupthree.close()
      }
    },
  };
</script>
<style lang="scss" scoped>
	/deep/ .titla-plac {
		line-height: 106rpx;
	}
  .addtype {
    text-align: center;
    font-size: 30rpx;
    color: #1A1A1A;
    font-weight: 500;

    .addvideo {
      margin: 40rpx 0;
    }

    .addimg {
      margin: 83rpx 0 0 0;
      border-bottom: 1rpx solid #E6E6E6;
      padding-bottom: 40rpx;
    }
  }

  .active {
    color: #DCCCA4 !important;
    background-color: #0B844A !important;
  }

  .identty_images {
    width: 750rpx;
  }

  .peakleft {
    font-weight: 700;
  }

  .final {
    width: 459rpx;
    background: linear-gradient(270deg, rgba(0, 50, 29, 1), rgba(40, 69, 51, 1));
    border-radius: 20rpx;
    text-align: center;
    // overflow: hidden;
    position: relative;

    .rightclose {
      image {
        width: 41rpx;
        height: 41rpx;
        position: absolute;
        right: 0;
        top: -59rpx;
      }
    }

    .image {
      margin: 0 auto;

      image {
        width: 80rpx;
        height: 80rpx;
      }
    }

    .topmargin {
      height: 53rpx;
    }

    .waitfor {
      font-size: 34rpx;
      font-weight: 500;
      color: #dccca4;
      margin-top: 20rpx;
      line-height: 34rpx;
    }

    .content {
      color: #dccca4;
      font-size: 26rpx;
      font-weight: 500;
      width: 280rpx;
      margin: auto;
      margin-top: 9rpx;
    }

    .addintegral {
      font-weight: 500;
      font-size: 24rpx;
      color: #ffffff;
      margin-top: 39rpx;
    }

    .close {
      width: 346rpx;
      margin: 0 auto;
      height: 80rpx;
      background-color: rgba(220, 204, 164, 1);
      color: rgba(6, 53, 33, 1);
      border-radius: 40rpx;
      font-size: 30rpx;
      font-weight: 500;
      margin-top: 14rpx;
      line-height: 80rpx;
    }

    .bottommargin {
      height: 53rpx;
    }
  }

  .showpopup {
    .cancel {
      text-align: center;
      padding: 37rpx 0;
      font-size: 30rpx;
      font-weight: 500;
      color: #1a1a1a;
      border-bottom: 1rpx solid #e6e6e6;
      // margin-bottom: 40rpx;
    }

    .greygrid {
      height: 20rpx;
      background-color: #e6e6e6;
    }

    .selected {
      margin-top: 48rpx;
      padding: 0 30rpx;

      .selecteditem {
        font-size: 28rpx;
        font-weight: 700;
        color: #1a1a1a;
      }

      .allspeak {
        padding-bottom: 31rpx;

        .allspeaktitle {
          font-size: 28rpx;
          font-weight: 700;
          color: #1a1a1a;
          margin-top: 11rpx;
          margin-bottom: 17rpx;
        }

        .allspeakitem {
          display: flex;
          flex-wrap: wrap;

          .item {
            margin-right: 25rpx;
            margin-bottom: 23rpx;

            padding: 19rpx 24rpx 18rpx 25rpx;
            // line-height: 24rpx;
            font-weight: 400;
            border-radius: 8rpx;
            color: #1a1a1a;
            background-color: #f5f5f5;
            // color: #dccca4;
            // background: #0B844A;
          }
        }
      }

      .tobeselected {
        display: flex;
        flex-wrap: wrap;
        margin-top: 17rpx;

        .block {
          font-size: 24rpx;
          margin-bottom: 23rpx;
          font-weight: 400;
          line-height: 24rpx;
          border-radius: 8rpx;
          margin-right: 29rpx;
          color: #1a1a1a;
          background-color: #f5f5f5;
          padding: 19rpx 24rpx 18rpx 25rpx;
          position: relative;
        }

        .rederror {
          color: #ffffff;
          width: 34rpx;
          height: 34rpx;
          background-color: #ef3124;
          border-radius: 50%;
          text-align: center;
          line-height: 34rpx;
          position: absolute;
          top: -17rpx;
          right: -17rpx;
        }
      }
    }

    background-color: #ffffff;
    border-radius: 50rpx 50rpx 0 0;
    // padding: 37rpx 30rpx 0 	30rpx ;
    position: relative;

    .top {
      display: flex;
      justify-content: center;
      padding-top: 37rpx;

      .addedspeak {
        .item {
          font-size: 36rpx;
          font-weight: 700;
          text-align: center;
          color: #1a1a1a;
          margin-bottom: 12rpx;
        }

        .line {
          width: 64rpx;
          height: 8rpx;
          background-color: #cccccc;
          margin: 0 auto;
        }
      }

      .determine {
        position: absolute;
        right: 30rpx;
        top: 41rpx;
        font-size: 30rpx;
        font-weight: 500;
        color: #1a1a1a;
      }
    }

    .line {
      display: flex;
      justify-content: space-between;

      .linetwo {
        width: 64rpx;
        height: 8rpx;
        background-color: #cccccc;
        border-radius: 50rpx;
      }
    }
  }

  .hotsale {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 104rpx;

    .item {
      background-color: #f5f5f5;
      color: rgba(26, 26, 26, 1);
      margin: 27rpx 29rpx 0 30rpx;
      border-radius: 8rpx;
      padding: 19rpx 41rpx 18rpx 25rpx;
      position: relative;

      .itemdel {
        position: absolute;
        top: -17rpx;
        right: -17rpx;
        width: 34rpx;
        height: 34rpx;
        background-color: rgba(239, 49, 36, 1);
        border-radius: 50%;
        text-align: center;
        line-height: 34rpx;
        color: #fff;
      }
    }
  }

  .lasttopic {
    display: flex;
    justify-content: space-between;

    .addtopic {
      font-size: 28rpx;
      font-weight: 700;
      color: #1a1a1a;
      margin: 26rpx 0 27rpx 30rpx;

      text {
        color: rgba(153, 153, 153, 1);
        font-weight: Regular;
      }

      .six {
        font-weight: 400;
      }
    }

    .addtopicright {
      margin: 33rpx 30rpx 33rpx 0;
      color: #999999;
    }
  }

  .eightborder {
    height: 8rpx;
    background-color: #f5f5f5;
  }

  .speak {
    .speaklist {
      overflow-x: hidden;
      // width: 100%;
      display: flex;
      white-space: nowrap;
      overflow: hidden;
      overflow-x: auto;
      padding: 27rpx 30rpx 40rpx 30rpx;

      .listcontent {
        border-radius: 16rpx;
        display: flex;
        // box-shadow: 10rpx 10rpx 5rpx #fdfdfd;
        box-shadow: #e6e6e6 0rpx 0rpx 20rpx;
        // align-items: center;
        width: 582rpx;
        position: relative;
        padding: 30rpx 34rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-right: 36rpx;
		box-sizing: border-box;
        // background-color: yellow;
        .del {
          position: absolute;
          right: -17rpx;
          top: -17rpx;
          width: 34rpx;
          color: #fff;
          height: 34rpx;
          background-color: #ef3124;
          border-radius: 50%;
          text-align: center;
          line-height: 34rpx;
        }

        .same {
          display: flex;
          flex-direction: column;
          margin-left: 30rpx;
          justify-content: space-between;
          height: 140rpx;

          .item {
            width: 336rpx;
            font-size: 24rpx;
            color: #1a1a1a;
            opacity: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            word-wrap: break-word;
            word-break: break-all;
            white-space: normal !important;
          }

          .num {
            // display: flex;
            color: #ff0000;

            .alarm {
              font-weight: 700;
              font-size: 38rpx;
              opacity: 1;

              .large {
                font-size: 38rpx;
                font-weight: Bold;
                opacity: 1;
              }

              .spot {
                font-size: 38rpx;
                font-weight: Regular;
              }

              .small {
                font-size: 20rpx;
                font-weight: Regular;
              }
            }
          }
        }

        .img {
          image {
            width: 139rpx;
            height: 139rpx;
            border-radius: 16rpx;
          }
        }
      }
    }

    .onesolid {
      height: 1rpx;
      background-color: #e6e6e6;
    }

    .addspeak {
      line-height: 38rpx;
      margin: 26rpx 30rpx 28rpx 30rpx;
      font-size: 28rpx;
      color: #1a1a1a;
      font-weight: 400;
      display: flex;
      justify-content: space-between;

      .six {
        color: rgba(153, 153, 153, 1);
        font-weight: 400;
      }
    }
  }

  .addimage {
    padding: 30rpx 0rpx 40rpx 0rpx;
    margin-left: 30rpx;

    .imagefont {
      margin-bottom: 22rpx;
      font-weight: 700;
      color: #1a1a1a;
      font-size: 28rpx;
      opacity: 1;

    }
  }

  .line {
    width: 100%;
    height: 8rpx;
    background: #f5f5f5;
  }

  .line-2 {
    width: 690rpx;
    margin-left: 30rpx;
    background: #E6E6E6;
    height: 2rpx;
  }

  .showhidden {
    .copywriting {
      margin: 35rpx 30rpx 0rpx 30rpx;

      .copywritingitem {
        font-weight: 700;
        font-size: 28rpx;
        color: #1a1a1a;
        opacity: 1;
        margin-bottom: 8rpx;
      }

      .texterea {
        height: 234rpx;
        background-color: #fafafa;
        border-radius: 21rpx;
        padding: 22rpx 0 0 20rpx;

        .textereaitem {
          font-size: 24rpx;
          height: 212rpx;
          // background-color: red;
        }
      }
    }
  }

  .nextstep {
    text-align: center;
    margin-top: 50rpx;
    padding-bottom: 100rpx;

    .btn {
      background-color: #0B844A;
      border-radius: 43px;
      width: 690rpx;
      margin: 0 auto;
      color: #ffffff;
    }

    .reward {
      margin-bottom: 13rpx;
      font-weight: 400;
      color: #999999;
      font-size: 24rpx;
    }
  }

  .nextsteptwo {
    text-align: center;

    .btn {
      background-color: #0B844A;
      border-radius: 43px;
      width: 690rpx;
      margin: 0 auto;
      color: #ffffff;
    }

    .reward {
      margin-bottom: 13rpx;
      font-weight: 400;
      color: #999999;
      font-size: 24rpx;
    }
  }

  .remind {
    margin: 22rpx 30rpx 0 30rpx;

    .tips {
      font-weight: 700;
      font-size: 28rpx;
      opacity: 1;
      color: #1a1a1a;
      text-align: left;
    }

    .tipsone {
      margin: 15rpx 0;
      font-weight: 400;
      font-size: 24rpx;
      opacity: 1;
      color: #999999;
    }
  }

  .uni-textarea-textarea {
    // padding: 0 30rpx !important;
  }

  .contenttitle {
    // height: 106rpx;
    margin: 0 30rpx;

    textarea {
   //    height: 80rpx !important;
	  // display: flex;
	  // align-items: center;
    }

    .title {
      // line-height: 106rpx;
      margin-right: 30rpx;
      font-size: 32rpx;
      border-bottom: 1rpx solid #e6e6e6;
      font-weight: 700;
      color: #1a1a1a;
      width: 100%;
      font-weight: 500;
	  height: 80rpx !important;
	  line-height: 80rpx;
	  display: flex;
	  align-items: center;
	  margin-top: 20rpx;
    }
  }

  .article {
    width: 100%;
    height: 584rpx;
    background: #f5f5f5;
    text-align: center;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;

    .addsymbol {
      width: 81rpx;
      height: 81rpx;
      border: 6rpx solid #0B844A;
      border-radius: 50%;
      text-align: center;
      line-height: 81rpx;
      font-size: 60rpx;
      color: #0B844A;
      margin: 0 auto;
      margin-bottom: 30rpx;
      font-weight: 700;
      position: relative;

      .plus {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -55%);
      }
    }

    .content {
      font-size: 28rpx;
      font-weight: 400;
      color: #666666;
      opacity: 1;
    }
  }
</style>