horzi_rai_wxa/components/ItemComponent/activityItem.vue

<template>
  <view class="container-activity-item" @click="goDetail(list)">
    <view class="content-sign">
      <view :class="[list.ActivityType === 0 ? 'is-down' : 'is-up', 'is-up-down']">{{ list.ActivityType === 0 ? "线下" : "线上" }}</view>
      <view v-if="list.ActiveState == 1 || list.ActiveState == 2" :class="[list.ActiveState == 1 ? 'is-down-state' : 'is-up-state', 'is-up-down', 'state']">
        {{ list.ActiveState == 1 ? "未开始" : "进行中" }}
      </view>
      <block v-else>
        <view v-if="list.TripStatus != 1" :class="['is-end', 'is-up-down', 'state']"> 已结束 </view>
      </block>
    </view>
    <view class="content-type"> {{ list.ActivityTypeName || "专项产业调研" }}</view>
    <view :class="['content-title', 'text-Line', list.ResearchTheme && 'content-min-hight']" v-if="list.ActivityName || list.ResearchTheme">
      {{ list.ActivityName || list.ResearchTheme }}
    </view>
    <view style="display: flex" class="content-text content-min-hight text_twoLine" v-if="list.ActivityTimeText && list.SourceType !== 1">
      <text style="flex-shrink: 0"> 活动时间：</text>
      <text> {{ list.ActivityTimeText }}</text>
    </view>
    <view class="content-text text-Line" v-else>
      {{ list.Host ? "主持人:" : list.Expert ? "专家背景:" : list.Speaker ? "主讲人:" : list.DistinguishedGuest ? "嘉宾:" : "" }}
      {{ list.Host ? list.Host : list.Expert ? list.Expert : list.Speaker ? list.Speaker : list.DistinguishedGuest ? list.DistinguishedGuest : "" }}
    </view>
    <view class="content-time" v-if="list.SourceType == 1">
      {{ list.ActivityTimeText }}
    </view>
    <view v-if="list.City" class="content-city">
      <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/location.png"></image>
      {{ list.City }}
    </view>
    <view :class="['content-btn', isEndBtnSlide(list) > 2 && 'content-btn-end']">
      <block v-if="list.SourceType === 1">
        <block v-if="list.ActiveState == 1">
          <text class="item-btn btn-solid" v-if="list.IsShowOutboundCall && list.ActivityTypeId == 1" @click.stop="signupIsAddOfCancel(list, 1)">{{
            list.IsSignup == 1 ? "取消外呼" : "预约外呼"
          }}</text>
          <text class="item-btn" v-if="list.IsShowAppointment" @click.stop="summaryIsHandel(list)">{{ list.IsAppointment == 1 ? "取消纪要" : "预约纪要" }}</text>
          <text class="item-btn" v-if="list.IsShowMeetingReminder" @click.stop="meetingReminderAdd(list, list.IsCancelMeetingReminder)">
            {{ list.IsCancelMeetingReminder == 0 ? "消息提醒" : "取消提醒" }}
          </text>
          <view class="item-btn" v-if="list.IsShowHelpSsk" style="width: 130rpx">
            <text @click.stop="askingGo(list)">帮我带问</text>
          </view>
          <text class="item-btn btn-solid" v-if="list.IsShowOutboundCall && list.ActivityTypeId != 1" @click.stop="signupIsAddOfCancel(list, 1)">{{
            list.IsSignup == 1 ? "取消外呼" : "预约外呼"
          }}</text>
          <text class="item-btn" v-if="list.IsShowDetails" @click.stop="goDetail(list)">查看详情</text>
          <block v-if="list.IsShowSignup">
            <block v-if="list.IsCClassMeeting">
              <text class="item-btn btn-solid" @click.stop="signupIsAddOfCancel(list, 3, 'CClass')">{{ list.IsSignup == 1 ? "取消报名" : "我要报名" }}</text>
            </block>
            <block v-else>
              <text class="item-btn btn-solid" v-if="list.IsSignup !== 1" @click.stop="wanttosignup(list)">我要报名</text>
              <text class="item-btn btn-solid" v-else @click.stop="signupIsAddOfCancel(list, 2)">{{ list.SignupType == 1 ? "取消外呼" : "取消报名" }}</text>
            </block>
          </block>
        </block>
        <text v-if="list.IsShowHelpSsk && list.ActiveState == 2" class="item-btn" @click.stop="askingGo(list, '提问')">实时提问</text>
      </block>
      <view class="bottom-box real-time" v-else>
        <view class="bottom-box">
          <view class="" style="width: 130rpx"> </view>
          <text class="item-btn" @click.stop="lookImg(list)">行程安排</text>
          <block v-if="list.TripStatus == 2">
            <text v-if="list.ActiveState == 1" class="item-btn btn-solid" @click.stop="applyOfcancel(list)">{{ list.IsTrip == 0 ? "我要报名" : "取消报名" }}</text>
          </block>
          <block v-else>
            <text class="item-btn btn-solid" v-if="list.IsSignup !== 1" @click.stop="interest(list)">感兴趣</text>
            <text class="item-btn btn-solid" @click.stop="beNotInterested(list)" v-else>已预报名</text>
          </block>
        </view>
      </view>
    </view>
    <image v-if="list.TripStatus == 2" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/confirm_XC_new.png" class="content-img"></image>
    <image v-if="list.TripStatus == 1" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/Y_apply_new.png" class="content-img"></image>
    <!-- 所有自定义弹框 -->
    <modalDialog
      :isShow="isShow"
      :signupType="signupType"
      :goFollow="goFollow"
      :hasPermission="hasPermission"
      :jurisdictionList="jurisdictionList"
      :editIsShow="editIsShow"
      :isCancelShow="isCancelShow"
      :idTypeCancel="idTypeCancel"
      :countryCode="countryCode"
      :mobileEdit="mobileEdit"
      :goOnNextStep="goOnNextStep"
      :isShowhasPermission="isShowhasPermission"
      :applyForIsShow="applyForIsShow"
      :mailboxBinding="mailboxBinding"
    />
    <u-modal
      v-model="specialGoFollowShow"
      :content-style="{ fontSize: '32rpx' }"
      :show-cancel-button="show_cancel_button"
      confirm-text="知道了"
      :show-confirm-button="show_confirm_button"
      :show-title="false"
      :cancel-style="{ borderRight: '1rpx solid #EBEBEB' }"
      :confirm-style="{ fontWeight: '700' }"
      :mask-close-able="specialIsHintShow"
      @confirm="ininModalHandler"
      @cancel="ininModalHandler"
    >
      <view class="slot-content">
        <block v-if="specialPopupMsg">
          <text>{{ specialAccounts }}</text>
          <text class="light-hint">{{ specialPopupMsg }}</text>
        </block>
        <rich-text v-else :nodes="specialAccounts"></rich-text>
      </view>
    </u-modal>
    <view class="select-box">
      <u-popup v-model="selectShow" mode="bottom">
        <view style="color: #333333; font-size: 28rpxrpx">请选择参会方式</view>
        <view style="color: #2c83ff" @click.stop="signupIsAddOfCancel('', 1)">预约外呼</view>
        <view style="color: #2c83ff" @click.stop="signupIsAddOfCancel('', 2)">自主拨入</view>
        <view style="color: #a9afb8" @click.stop="selectShow = false">取消</view>
      </u-popup>
    </view>
  </view>
</template>

<script>
import myActivityMixin from "@/components/activity/indexActivity.js";
import modalDialog from "../modalDialog.vue";
import { activity, User } from "@/config/api.js";

export default {
  name: "",
  components: { modalDialog },
  props: {
    list: {
      type: Object,
      default: {},
      required: true,
    },
  },
  data() {
    return {
      /**/
      tabsActive: 0,
      /**/
      /*  共用的弹框  */
      isShow: false, //弹框
      signupType: "", //关注类型
      goFollow: false, //是否关注公众号
      hasPermission: "", //是否有权限
      jurisdictionList: {},
      editIsShow: false, //外呼莫泰框
      isCancelShow: false,
      idTypeCancel: {
        id: "",
        type: 1,
        cutId: "",
        state: "",
        isNum: false,
      },
      countryCode: "", //外呼区号
      mobileEdit: "", //外呼手机号
      goOnNextStep: "", //设置外呼号后弹出哪个
      isShowhasPermission: false, //拨打销售电话
      applyForIsShow: false, //潜在用户
      mailboxBinding: false, //是否绑定邮箱
      selectShow: false, //
      specialIsHintShow: false, // 按钮的显示
      specialGoFollowShow: false, // 弹框的隐藏显示
      specialAccounts: `您已开启【专项调研】新活动通知<br/><br/>请关注【查研观向小助手】公众号，及时获取微信消息提醒`,
      specialIsFollow: false, // 是否关注
      specialPopupMsg: "", // 消息的文案
      show_cancel_button: false, // 取消按钮的隐藏显示
      show_confirm_button: false, // 确定按钮的隐藏显示
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    isEndBtnSlide(item) {
      let isKey = ["IsShowOutboundCall", "IsShowAppointment", "IsShowMeetingReminder", "IsShowHelpSsk", "IsShowDetails", "IsShowSignup"];
      let arr = [];
      Object.keys(item).forEach((key) => {
        if (isKey.includes(key)) {
          item[key] && arr.push(item[key]);
        }
      });
      return arr.length;
    },
    // 我要报名
    wanttosignup(item) {
      this.activityIdAdd = item.ActivityId;
      if (item.YidongActivityId) {
        this.goDetail(item);
        return;
      } else if (item.IsLimitPeople == 1 && item.ActivityTypeName == "公司调研电话会") {
        this.selectShow = true;
      } else {
        this.activityIdAdd = "";
        this.signupIsAddOfCancel(item, 3);
      }
    },

    //报名/取消报名
    signupIsAddOfCancel(item, type, valName = "") {
      let id = this.activityIdAdd || item.ActivityId;
      let itemData = item;
      if (item && item.IsSignup == 1) {
        const str = item.ActivityTime.replace(/-/g, "/");
        const date = new Date(str);
        const times = date.getTime();
        const num = new Date().getTime();
        if (times - num <= 3600000) {
          uni.showModal({
            confirmText: "知道了",
            showCancel: false,
            confirmColor: "#3385FF",
            content: type == 1 ? "活动开始前1小时内无法取消预约外呼，请联系对口销售处理" : "活动开始前1小时内无法取消报名，请联系对口销售处理",
          });
          return;
        }
        uni.showModal({
          content: type == 1 ? "您要取消此次活动预约外呼吗？" : "您要取消此次活动的报名吗？",
          confirmColor: "#3385FF",
          cancelColor: "#606266",
          success: async (res) => {
            if (res.confirm) {
              const res = await activity.signupCancel({ ActivityId: item.ActivityId, SignupType: type });
              if (res.Ret === 200) {
                this.parentDataEmit(item, "IsSignup", 0);
                this.init();
                type == 1
                  ? uni.showToast({
                      title: "预约外呼已取消",
                      duration: 2000,
                    })
                  : uni.showToast({
                      title: "已取消报名",
                      duration: 2000,
                    });
                if (valName === "我的") {
                  this.getActivityList();
                }
              }
            }
          },
        });
      } else {
        let timer = null;
        if (this.flag) return;
        clearTimeout(timer);
        this.flag = true;
        this.selectShow = false;
        activity
          .signupAdd({
            ActivityId: id,
            SignupType: type,
          })
          .then((res) => {
            if (res.Ret == 200) {
              this.hasPermission = res.Data.HasPermission;
              this.jurisdictionList = res.Data;
              if (this.hasPermission == 1) {
                item.SignupType = type;
                this.signupType = valName == "CClass" ? "CClass" : res.Data.SignupType;
                this.countryCode = res.Data.CountryCode;
                this.mobileEdit = res.Data.Mobile;
                this.goOnNextStep = res.Data.GoFollow;
                this.idTypeCancel = {
                  cutId: res.Data.ActivityId,
                  state: 1,
                };
                if (res.Data.GoBindEmail) {
                  this.mailboxBinding = true;
                  return;
                }
                if (res.Data.SignupStatus !== "Success") {
                  this.isShow = true;
                } else {
                  if (res.Data.GoOutboundMobile) {
                    this.editIsShow = true;
                  } else if (res.Data.GoFollow) {
                    this.goFollow = res.Data.GoFollow;
                  } else if (res.Data.SignupStatus == "Success") {
                    this.isShow = true;
                  }
                  this.parentDataEmit(item, "IsSignup", 1);
                }
              } else if (this.hasPermission == 2) {
                this.isShowhasPermission = true;
              } else if (this.hasPermission == 3 || this.hasPermission == 4 || this.hasPermission == 5) {
                this.applyForIsShow = true;
              }
            }
          });
        timer = setTimeout(() => {
          this.flag = false;
        }, 500);
      }
    },
    // 弹框的初始化
    init() {
      this.signupType = "";
      this.goFollow = false;
      this.isShow = false;
      this.isCancelShow = false;
    },
    //添加消息提醒接口
    meetingReminderAdd(item, type) {
      if (type != 0) {
        this.meetingReminderCancel(item);
        return;
      }
      activity
        .meetingReminderAdd({
          ActivityId: item.ActivityId,
        })
        .then((res) => {
          if (res.Ret == 200) {
            this.hasPermission = res.Data.HasPermission;
            this.jurisdictionList = res.Data;
            if (this.hasPermission == 1) {
              if ((res.Data.GoFollow && res.Data.SignupStatus !== "Success") || !res.Data.GoFollow) {
                this.isShow = true;
              } else {
                this.goFollow = res.Data.GoFollow;
              }
              this.signupType = 999;
              this.idTypeCancel = {
                cutId: res.Data.ActivityId,
                state: 1,
                name: "conference",
              };
              this.parentDataEmit(item, "IsCancelMeetingReminder", 1);
            } else if (this.hasPermission == 2) {
              this.isShowhasPermission = true;
            } else if (this.hasPermission == 3 || this.hasPermission == 4 || this.hasPermission == 5) {
              this.applyForIsShow = true;
            }
          }
        });
    },
    //取消消息提醒接口
    meetingReminderCancel(item) {
      activity
        .meetingReminderCancel({
          ActivityId: item.ActivityId,
        })
        .then((res) => {
          if (res.Ret == 200) {
            uni.showModal({
              confirmText: "知道了",
              confirmColor: "#3385FF",
              content: res.Msg,
              showCancel: false,
              success: (res) => {
                if (this.isrefresh) return this.getActivityList();
                if (res.confirm) {
                  this.parentDataEmit(item, "IsCancelMeetingReminder", 0);
                }
              },
            });
          }
        });
    },

    //帮我带问
    async askingGo(item, type = "") {
      const res = await activity.checkAskActivity({ ActivityId: item.ActivityId });
      if (res.Ret == 200) {
        this.hasPermission = res.Data.HasPermission;
        this.jurisdictionList = res.Data;
        if (this.hasPermission == 1) {
          uni.navigateTo({
            url: "/activityPages/generationAsk/generationAsk?id=" + item.ActivityId + "&type=" + type,
          });
        } else if (this.hasPermission == 2) {
          this.isShowhasPermission = true;
        } else if (this.hasPermission == 3 || this.hasPermission == 4 || this.hasPermission == 5) {
          this.applyForIsShow = true;
        }
      }
    },
    // 弹框的初始化
    init() {
      this.signupType = "";
      this.goFollow = false;
      this.isShow = false;
      this.isCancelShow = false;
    },
    //预约纪要、取消预约纪要
    async summaryIsHandel(item, type = "") {
      if (item.IsAppointment == 0) {
        const res = await activity.postAppointmentAdd({ ActivityId: item.ActivityId });
        if (res.Ret == 200) {
          this.hasPermission = res.Data.HasPermission;
          this.jurisdictionList = res.Data;
          if (this.hasPermission == 1) {
            this.signupType = "summaryIsHandel";
            this.goOnNextStep = res.Data.GoFollow;
            if (res.Data.SignupStatus !== "Success") {
              this.isShow = true;
            } else {
              if (res.Data.GoFollow) {
                this.goFollow = res.Data.GoFollow;
              } else if (res.Data.SignupStatus == "Success") {
                this.isShow = true;
              }
              this.parentDataEmit(item, "IsAppointment", 1);
            }
          } else if (this.hasPermission == 2) {
            this.isShowhasPermission = true;
          } else if (this.hasPermission == 3 || this.hasPermission == 4 || this.hasPermission == 5) {
            this.applyForIsShow = true;
          }
        }
      } else {
        uni.showModal({
          content: "确定要取消预约本场调研的纪要吗?",
          confirmColor: "#3385FF",
          cancelColor: "#606266",
          success: async (res) => {
            if (res.confirm) {
              const res = await activity.postAppointmentCancel({ ActivityId: item.ActivityId });
              if (res.Ret === 200) {
                this.parentDataEmit(item, "IsAppointment", 0);
                this.init();
                if (type === "我的") {
                  this.getActivityList();
                }
              }
            }
          },
        });
      }
    },
    //去往详情页面
    goDetail(item) {
      if (item.SourceType !== 1) {
        this.$store.dispatch("checkHandle", "/activityPages/specialDetail/specialDetail?id=" + item.ActivityId);
      } else {
        this.$store.dispatch("checkHandle", "/activityPages/activityDetail/activityDetail?id=" + item.ActivityId);
      }
    },
    // 查看行程的事件
    lookImg(item) {
      uni.previewImage({
        urls: [item.TripImgLink], //查看图片的数组
      });
    },
    // 点击感兴趣
    async interest(item) {
      const res = await activity.postSpecialSignupAdd({
        ActivityId: item.ActivityId,
      });
      if (res.Ret === 200) {
        this.modalShow(res);
        if (res.Data.SignupStatus == 1) {
          this.parentDataEmit(item, "IsSignup", 1);
        }
      }
    },
    // 报名或者取消报名
    async applyOfcancel(item, type = "") {
      this.show_confirm_button = true;
      if ((type != "back" && item.IsTrip == 1) || (type == "back" && item.IsSignup == 1)) {
        // 取消报名
        const str = item.ActivityTime.replace(/-/g, "/");
        const date = new Date(str);
        const times = date.getTime();
        const num = new Date().getTime();
        let twoDays = times - num <= 3600000 * 48;
        uni.showModal({
          content: twoDays ? "活动开始前48小时内，取消报名仍会维持扣点，确定要取消报名吗？" : "您要取消此次专项调研的预报名吗？",
          confirmColor: "#3385FF",
          cancelColor: "#606266",
          success: async (res) => {
            if (res.confirm) {
              const res = await activity.activityApecialCancel({
                ActivityId: item.ActivityId,
              });
              if (res.Ret === 200) {
                uni.showToast({
                  title: "已取消",
                  duration: 2000,
                });
                item.TripNum > 0 && (item.TripNum -= 1);
                type == "back" ? this.parentDataEmit(item, "IsSignup", 0) : this.parentDataEmit(item, "IsTrip", 0);
              }
            }
          },
        });
      } else {
        // 报名
        const res = await activity.activityApecialAdd({ ActivityId: item.ActivityId });
        if (res.Ret == 200) {
          this.modalShow(res);
          if (res.Data.SignupStatus == 1) {
            type == "back" ? this.parentDataEmit(item, "IsSignup", 1) : this.parentDataEmit(item, "IsTrip", 1);
          }
        }
      }
    },

    // 弹框的数据重置
    ininModalHandler() {
      this.show_cancel_button = false;
      this.show_confirm_button = false;
      this.specialIsHintShow = false;
      this.specialGoFollowShow = false;
      this.isCancelBtn = false;
    },

    // 显示弹框
    modalShow(res) {
      this.show_confirm_button = true;
      this.specialGoFollowShow = true;
      this.specialAccounts = res.Data.PopupMsg;
      this.specialPopupMsg = res.Data.PopupMsg2;
    },
    // 已预报名、就是不感兴趣
    beNotInterested(item) {
      uni.showModal({
        content: "您要取消此次专研调研的预报名吗？",
        confirmColor: "#3385FF",
        cancelColor: "#606266",
        success: async (res) => {
          if (res.confirm) {
            const res = await activity.postSpecialSignupAdd({
              ActivityId: item.ActivityId,
            });
            if (res.Ret === 200) {
              this.parentDataEmit(item, "IsSignup", 0);
            }
          }
        },
      });
    },

    // 新调研通知
    async specialFollow() {
      this.show_confirm_button = true;
      if (this.specialIsFollow) {
        uni.showModal({
          content: "您要取消【专项调研】新活动通知吗？",
          confirmColor: "#3385FF",
          cancelColor: "#606266",
          success: async (res) => {
            if (res.confirm) {
              const res = await activity.postSpecialFollow();
              if (res.Ret === 200) {
                this.specialIsFollow = !this.specialIsFollow;
              }
            }
          },
        });
      } else {
        const res = await activity.postSpecialFollow();
        if (res.Ret === 200) {
          this.show_cancel_button = true;
          this.specialIsFollow = !this.specialIsFollow;
          this.specialGoFollowShow = true;
        }
      }
    },
    parentDataEmit(item, value, num) {
      let index = this.$parent.newDataList.findIndex((key) => key.Activity && key.Activity.ActivityId === item.ActivityId);
      this.$parent.newDataList[index].Activity[value] = num;
    },
  },
};
</script>
<style scoped lang="scss">
.container-activity-item {
  position: relative;
  width: 100%;
  background: #ffffff;
  box-shadow: 0rpx 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.16);
  border-radius: 8rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  font-size: 24rpx;
  overflow: hidden;
  .content-sign {
    display: flex;
    .is-up-down {
      width: 110rpx;
      height: 40rpx;
      text-align: center;
      line-height: 40rpx;
      border-radius: 4rpx;
      color: #fff;
    }
    .is-up {
      background: linear-gradient(90deg, #0151ff 0%, #01b9ff 100%);
    }
    .is-up-state {
      background: #ff9110;
    }
    .is-down-state {
      background-color: #01a7ff;
    }
    .is-down {
      background: linear-gradient(90deg, #ff8a05 0%, #ffb74d 100%);
    }
    .is-end {
      background: #dddddd;
    }
    .state {
      border-radius: 4rpx 0 4rpx 0;
      margin-left: 10rpx;
    }
  }
  .content-type {
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
    line-height: 38rpx;
    margin: 10rpx 0;
  }
  .content-title {
    font-size: 28rpx;
    font-weight: 400;
    color: #333333;
    line-height: 44rpx;
  }
  .content-text {
    font-size: 28rpx;
    font-weight: 400;
    color: #999999;
    line-height: 44rpx;
    margin: 10rpx 0;
  }

  .content-time {
    color: #333333;
    margin-bottom: 15rpx;
  }
  .content-city {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: #3385ff;
    image {
      width: 27rpx;
      height: 32rpx;
      margin-right: 8rpx;
    }
  }
  .content-img {
    position: absolute;
    top: 49rpx;
    right: 0;
    width: 205rpx;
    height: 119rpx;
  }

  .content-btn {
    display: flex;
    overflow: hidden;
    overflow-x: auto;
    margin-top: 20rpx;
    justify-content: flex-end;
    .item-btn {
      color: #3385ff;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 113rpx;
      height: 42rpx;
      border-radius: 4rpx;
      border: 1rpx solid #3385ff;
      margin-left: 20rpx;
      flex-shrink: 0;
    }
    .btn-solid {
      background: #3385ff;
      border: none;
      color: #fff;
    }
  }
  .content-btn-end {
    justify-content: flex-start;
  }
  .bottom-box {
    display: flex;
  }
  .text-Line {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    word-break: break-all;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  .select-box {
    width: 100%;

    view {
      height: 95prx;
      line-height: 95rpx;
      text-align: center;
      font-size: 32rpx;
      border-bottom: 1rpx solid #ebebeb;
    }
  }
  .content-min-hight {
    min-height: 88rpx;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    word-break: break-all;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }
}
</style>