H5-Merchant/pages/cashier/index.vue

<template>
  <view class="cashier">
    <view class="cashier-topin" v-if="logintext">
      <view class="tegyhsj"> 收银台 </view>
    </view>
    <view class="cashier-header">
      <view class="cashier-header-text" v-if="toptext"> 收银台 </view>
      <view class="cashier-tablin">
        <view class="cashier-tablin-nie">
          <view class="cashier-tablin-nie-left">
            <view class="cashier-tablin-nie-left-icon">
              <image :src="merchantCashierShow.logo" mode="aspectFit"> </image>
            </view>
            <view class="cashier-tablin-nie-left-text">
              <view class="cashier-tablin-nie-left-text-top">
                {{
                  merchantCashierShow.mer_name == undefined
                    ? "..."
                    : merchantCashierShow.mer_name
                }}
              </view>
              <view class="cashier-tablin-nie-left-text-bottom">
                <view class="cashier-tablin-nie-left-text-bottom-in">
                  {{
                    merchantCashierShow.category_name == undefined
                      ? "..."
                      : merchantCashierShow.category_name
                  }}
                </view>
                <view class="cashier-tablin-nie-left-text-bottom-it">
                  加入日期:{{
                    merchantCashierShow.create_time == undefined
                      ? "..."
                      : merchantCashierShow.create_time
                  }}
                </view>
              </view>
            </view>
          </view>
          <!-- <view class="cashier-tablin-nie-right" @click="activitecode(merchantCashierShow)" v-if="merchantCashierShow.merchant_level==1"> -->
          <view
            class="cashier-tablin-nie-right"
            @click="activitecode(merchantCashierShow)"
          >
            <image :src="merchantCashierShow.qrcode_src" mode="widthFix">
            </image>
          </view>
        </view>
      </view>
    </view>

    <view class="cashier-list" v-if="Number(zhuangi) != 7 ? false : true">
      <view class="cashier-list-top">
        <view class="cashier-jilu-top" style="font-weight: bold">
          总分润值: {{ gongxian || 0 }}
        </view>
        <view class="cashier-jilu-top" style="font-weight: bold">
          总京豆: {{ jingdou || 0 }}
        </view>
      </view>
	  <view class="cashier-list-top">
	    <view class="cashier-jilu-top" >
	      线上支付总订单数: {{ xianxia || 0 }}
	    </view>
	    <view class="cashier-jilu-top">
	      下线支付总订单数: {{ xianshang || 0 }}
	    </view>
	  </view>
      <view class="cashier-list-top"></view>

      <view class="cashier-list-top">
        <view class="cashier-list-top-left">
          <view
            class="yi"
            v-for="(item, index) in items"
            @click="dianji(index)"
            　:style="index==indexs?'font-weight: 600;':'font-weight: 300;'"
          >
            {{ item.name }}
            <view
              class="cashier-list-top-left-yisss"
              v-if="index == indexs ? true : false"
            >
            </view>
          </view>
        </view>

        <view class="cashier-list-top-right" @click="peratingt">
          <view class="cashier-list-top-right-text"> 经营报表 </view>
          <view class="cashier-list-top-right-icon">
            <image
              src="https://cdn.bjtdba.com/vod/image/2022-08-11/20220811110111315.png"
              mode="widthFix"
            >
            </image>
          </view>
        </view>
      </view>

      <view class="cashier-list-tbot">
        <view class="yis">
          <view class="sgjd">
            ¥{{
              dataList.orderLineOrderSun
                ? dataList.orderLineOrderSun.orderLine || 0
                : 0
            }}
          </view>
          <view class="sf"> 线上营收 </view>
        </view>
        <view class="yis">
          <view class="sgjd">
            ¥{{
              dataList.belowTheLineSum
                ? dataList.belowTheLineSum.belowTheLine || 0
                : 0
            }}
          </view>
          <view class="sf"> 线下营收 </view>
        </view>
        <!-- <view class="yis" @click="xiaofeifen">
					<view class="sgjd">
						¥{{dataList.consumption==null?0:dataList.consumption}}
					</view>
					<view class="sf">
						消费分
					</view>
				</view> -->
        <view class="yis">
          <view class="sgjd">
            {{ dataList.sun == undefined ? 0 : dataList.sun }}
          </view>
          <view class="sf"> 锁定会员数 </view>
        </view>
        <!-- <view class="yis">
          <view class="sgjd">
            {{
              dataList.visitorNumber == undefined ? 0 : dataList.visitorNumber
            }}
          </view>
          <view class="sf"> 访客数 </view>
        </view> -->
        <view class="yis">
          <view class="sgjd">
            {{ dataList.number == undefined ? 0 : dataList.number }}
          </view>
          <view class="sf"> 支付人数 </view>
        </view>
        <view class="yis">
          <view class="sgjd">
            {{ dataList.jingdousum == undefined ? 0 : dataList.jingdousum }}
          </view>
          <view class="sf"> 京豆 </view>
        </view>
         <!-- <view class="yis">
          <view class="sgjd">
            {{
              dataList.fenrunzhi == undefined ? 0 : dataList.fenrunzhi
            }}
          </view>
          <view class="sf"> 分润值 </view>
        </view> -->
        <view class="yis">
          <view class="sgjd">
            {{
              dataList.gongxianSumsum == undefined ? 0 : dataList.gongxianSumsum
            }}
          </view>
          <view class="sf"> 分润值 </view>
        </view>
        <!-- 默认 -->
        <view class="yis">
          <view class="sgjd"> </view>
          <view class="sf"> </view>
        </view>
      </view>
    </view>
    <latestRecords class="mt26" :records="records"></latestRecords>
    <!-- <view
      class="cashier-jilu"
      :style="Number(zhuangi) != 7 ? 'margin-top:170rpx' : ''"
    >
      <view class="cashier-jilu-top"> 最新记录 </view>
      <view class="cashier-jilu-nei">
        <view
          class="cashier-jilu-nei-yis"
          v-for="(item, index) in List"
          :key="index"
        >
          <view class="cashier-jilu-nei-yis-left">
            <view class="cashier-jilu-nei-yis-left-mei">
              <image :src="item.avatar" mode="widthFix"></image>
            </view>
            <view class="cashier-jilu-nei-yis-left-yins">
              <view class="tetxsad">
                {{ item.nickname }}
              </view>
              <view class="sdffget">
                ID:{{
                  item.account.substr(0, 3) + "****" + item.account.substr(7)
                }}
              </view>
            </view>
          </view>
          <view class="cashier-jilu-nei-yis-right">
            {{ item.type }}
          </view>
        </view>
      </view>
    </view> -->
    <view
      class=""
      v-if="tihsi == 0"
      style="margin: 60rpx 0 20rpx 0; color: #999999; font-size: 26rpx"
    >
      —— 已经到最底部了哦 ——
    </view>
  </view>
</template>

<script>
import {
  selectMerchant,
  selectMerchantOrder,
  payUserList,
  getZuorijinri,
  getZuixinjilu,
} from "@/commit/shop.js";
import readAppInfo, { getPhpToken } from "@/utils/readAppInfo.js";
import latestRecords from "./latestRecords.vue";
export default {
  components: { latestRecords },
  data() {
    return {
      is_panudn: true,
      start_time: "",
      end_time: "",
      mer_id: "", //店铺ID
      logintext: false,
      toptext: true,
      indexs: 0,
      merchantCashierShow: [], // 店铺信息头
      dataList: [], //今日昨日收益
      page: 1, //默认1页
      limit: 10, //默认10条数据
      records: [], //最新记录
      items: [
        {
          name: "今日",
        },
        {
          name: "昨日",
        },
      ],
      List: [], //列表数据
      tihsi: "",
      zhuangi: "",
      gongxian: 0,
      jingdou: 0,
      phpToken: "",
      xianxia: 0,
      xianshang: 0,
      
    };
  },
  async onLoad() {
    console.log("进了我的页面了");

    await readAppInfo();
    let daySart = new Date();
    this.start_time = this.$time.dateFormat("yyyy-MM-dd", daySart);
    this.end_time = this.$time.dateFormat("yyyy-MM-dd", daySart);
    let selectmerchant = uni.getStorageSync("selectmerchant");

    let authorization = uni.getStorageSync("authorization");
    let userinfo = uni.getStorageSync("userinfo");
    this.mer_id = selectmerchant.merId;
    let jurisdiction = uni.getStorageSync("jurisdiction");

    if (jurisdiction) {
      jurisdiction.forEach((res, index) => {
        if (res == 7) {
          this.zhuangi = res;
        }
      });
    }
    // let selectmerchant = uni.getStorageSync("selectmerchant");
    const res = await getPhpToken();
    this.phpToken = res || uni.getStorageSync("phpToken");
    let uid = userinfo.uid;
    console.log(authorization, uid);
    if (authorization && uid) {
      if (selectmerchant.merId >= 0 && selectmerchant.status == -1) {
        uni.redirectTo({
          url: "/openmerchant/guide/index", //有或者没有商户 没有金额支付and激活码支付
        });
        return;
      } else if (
        selectmerchant.merId > 0 &&
        (selectmerchant.status == 1 || selectmerchant.status == 5)
      ) {
        this.getInitData(selectmerchant);
        return;
      } else if (
        selectmerchant.merId >= 0 &&
        (selectmerchant.status == 3 || selectmerchant.status == 4)
      ) {
        uni.redirectTo({
          url: "/openmerchant/shopentry/process?mer_id=" + selectmerchant.merId, //已开通商户未填写资料
        });
        return;
      } else if (selectmerchant.merId > 0 && selectmerchant.status == 0) {
        uni.redirectTo({
          url: "/openmerchant/shopentry/processaudit?submitCode=" + 3, //已开通商户待审核
        });
        return;
      } else if (selectmerchant.merId > 0 && selectmerchant.status == 2) {
        uni.redirectTo({
          url: "/openmerchant/shopentry/processaudit?submitCode=" + 2, //已开通商户审核拒绝
        });
        return;
      }
    } else {
      uni.redirectTo({
        url: "/pages/user/login/index",
      });
    }
  },
  onShow() {
    return;
    let authorization = uni.getStorageSync("authorization");
    let userinfo = uni.getStorageSync("userinfo");
    let selectmerchant = uni.getStorageSync("selectmerchant");
    let uid = userinfo.uid;
    console.log(authorization, uid);
    if (authorization && uid) {
      if (selectmerchant.merId >= 0 && selectmerchant.status == -1) {
        uni.redirectTo({
          url: "/openmerchant/guide/index", //有或者没有商户 没有金额支付and激活码支付
        });
        return;
      } else if (
        selectmerchant.merId > 0 &&
        (selectmerchant.status == 1 || selectmerchant.status == 5)
      ) {
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        this.selectMerchant();
        this.selectMerchantOrder();
        this.payUserList();
        return;
      } else if (
        selectmerchant.merId >= 0 &&
        (selectmerchant.status == 3 || selectmerchant.status == 4)
      ) {
        uni.redirectTo({
          url: "/openmerchant/shopentry/process?mer_id=" + selectmerchant.merId, //已开通商户未填写资料
        });
        return;
      } else if (selectmerchant.merId > 0 && selectmerchant.status == 0) {
        uni.redirectTo({
          url: "/openmerchant/shopentry/processaudit?submitCode=" + 3, //已开通商户待审核
        });
        return;
      } else if (selectmerchant.merId > 0 && selectmerchant.status == 2) {
        uni.redirectTo({
          url: "/openmerchant/shopentry/processaudit?submitCode=" + 2, //已开通商户审核拒绝
        });
        return;
      }
    } else {
      uni.redirectTo({
        url: "/pages/user/login/index",
      });
    }
  },
  watch: {
    phpToken:{
      handler(newVal, oldVal) {
         let selectmerchant = uni.getStorageSync("selectmerchant");
         if(newVal){
          this.getInitData(selectmerchant);
         }
      },
      immediate:true
    }
  },

  //监听tab 分类
  onPageScroll(res) {
    const query = uni.createSelectorQuery().in(this);
    query
      .select(".cashier-header")
      .boundingClientRect((data) => {
        if (data.top < 0) {
          this.toptext = false;
          this.logintext = true;
        } else if (data.top <= 1) {
          this.toptext = true;
          this.logintext = false;
        }
      })
      .exec();
  },
  onPullDownRefresh() {
    uni.showLoading({
      title: "加载中",
    });
    this.page = 1;
    this.is_panudn = true;
    this.List = [];
    this.selectMerchant();
    this.selectMerchantOrder();
    this.getZuorijinri();
    this.getZuixinjilu();
    // this.payUserList();
  },

  onReachBottom() {
    if (this.is_panudn == true) {
      this.page++;
      this.getZuixinjilu();
    } else {
      return;
    }
  },
  methods: {
      getInitData(selectmerchant) {
    if (
      selectmerchant.merId > 0 &&
      (selectmerchant.status == 1 || selectmerchant.status == 5)
    ) {
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      this.selectMerchant();
      this.selectMerchantOrder();
      this.getZuorijinri();
      this.getZuixinjilu();
      this.payUserList();
    }
  },
    // 店铺信息头
    selectMerchant() {
      selectMerchant({
        mer_id: this.mer_id,
      }).then(
        (res) => {
          console.log(res);
          if (res.data.status == 200) {
            this.merchantCashierShow = res.data.data.merchantCashierShow;
            this.merchantCashierShow.create_time =
              this.merchantCashierShow.create_time.split(" ")[0];
          }
        },
        (fail) => {
          console.log(fail);
        }
      );
    },
    activitecode(e) {
      uni.navigateTo({
        url:
          "/shop/perating/activitecode?qrcode_src=" +
          e.qrcode_src +
          "&code_id=" +
          e.code_id,
      });
    },
    peratingt() {
      uni.navigateTo({
        url: "/shop/perating/statement?sna=" + "1",
      });
    },
    xiaofeifen() {
      uni.navigateTo({
        url: "/shop/perating/consumption",
      });
    },
    // 今日昨日收益
    selectMerchantOrder() {
      uni.showLoading({
        title: "加载中",
      });
      selectMerchantOrder({
        start_time: this.start_time,
        end_time: this.start_time,
        mer_id: this.mer_id,
      }).then(
        (res) => {
          if (res.data.status == 200) {
            this.dataList = res.data.data;
            uni.hideLoading();
          }
        },
        (fail) => {
          console.log(fail);
          uni.hideLoading();
        }
      );
    },
    //点击今日昨日收益
    dianji(e) {
      this.indexs = e;
      let daySart = new Date();
      if (e == 0) {
        this.start_time = this.$time.dateFormat("yyyy-MM-dd", daySart);
        this.end_time = this.$time.dateFormat("yyyy-MM-dd", daySart);
        this.selectMerchantOrder();
      } else {
        var date = new Date();
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        var d = date.getDate() - 1;
        if (d == "0") {
          m = m - 1;
          var temp = new Date(y, m, d);
          d = temp.getDate();
        }
        var Yesterday = [y, m, d];
        Yesterday = Yesterday.join("/");
        this.start_time = this.$time.dateFormat("yyyy-MM-dd", Yesterday);
        this.end_time = this.$time.dateFormat("yyyy-MM-dd", Yesterday);
        this.selectMerchantOrder();
      }
    },
    // 最新纪录列表
    payUserList() {
      return;
      payUserList({
        mer_id: this.mer_id,
        pageNum: this.page,
        pageSize: this.limit,
      }).then(
        (res) => {
          uni.stopPullDownRefresh();
          if (res.data.status == 200) {
            this.tihsi = res.data.data.pageInfo.list.length;
            if (res.data.data.pageInfo.list.length > 0) {
              //分页处理
              if (this.page == 1) {
                this.List = res.data.data.pageInfo.list;
              } else {
                this.List = this.List.concat(res.data.data.pageInfo.list);
              }
            } else {
              this.is_panudn = false;
            }
            uni.hideLoading();
          }
        },
        (fail) => {
          uni.hideLoading();
          console.log(fail);
        }
      );
    },
    // 顶部统计
    getZuorijinri() {
      getZuorijinri({}).then(
        (res) => {
          console.log("顶部统计");
          console.log(res.data);
          console.log(res.data.data.list.gongxian);
          if (res.data.status == 200) {
            this.gongxian = res.data.data.list.fenrunzhi || 0;
            this.jingdou = res.data.data.list.jingdou;
			this.xianxia = res.data.data.list.xianxia;
			this.xianshang = res.data.data.list.xianshang;
          }
        },
        (fail) => {
          console.log(fail);
        }
      );
    },
    // 最新纪录
    getZuixinjilu() {
      uni.showLoading({
        title: "加载中",
      });
      getZuixinjilu({
        mer_id: this.mer_id,
        pageNum: this.page,
        pageSize: this.limit,
      }).then(
        (res) => {
          uni.stopPullDownRefresh();
          console.log(res);
          if (res.data.status == 200) {
            // this.tihsi = res.data.data.count || 0;
            this.tihsi = res.data.data.list.lenght || 0;
            if (res.data.data.count > 0) {
              if (this.page == 1) {
                this.records = res.data.data.list;
              } else {
                this.records = this.records.concat(res.data.data.list);
              }
            } else {
              if (this.page == 1) {
                this.records = [];
              }
              this.is_panudn = false;
            }
            console.log(this.records, "recordsrecordsrecords");
            uni.hideLoading();
          }
        },
        (fail) => {
          console.log(fail);
          uni.hideLoading();
        }
      );
    },
  },
};
</script>
<style>
page {
  background-color: #f7f8fc;
}
</style>

<style lang="scss" scoped>
.mt26 {
  margin-top: 26rpx;
}
.cashier-topin {
  width: 100%;
  height: 176rpx;
  background-color: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  font-size: 36rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  text-align: center;

  .tegyhsj {
    margin-top: 107rpx;
  }
}

.cashier {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  .cashier-header {
    width: 100%;
    height: 328rpx;
    background: linear-gradient(
      180deg,
      rgba(31, 124, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.15) 100%
    );
    position: relative;
    display: flex;
    justify-content: center;

    .cashier-header-text {
      position: absolute;
      font-size: 46rpx;
      font-weight: 500;
      color: #333333;
      top: 102rpx;
      left: 64rpx;
    }

    .cashier-tablin {
      position: absolute;
      top: 198rpx;
      width: 686rpx;
      height: 210rpx;
      background: #ffffff;
      border-radius: 16rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      .cashier-tablin-nie {
        width: 634rpx;
        height: 146rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .cashier-tablin-nie-left {
          width: 409rpx;
          height: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .cashier-tablin-nie-left-icon {
            width: 146rpx;
            height: 146rpx;
            border-radius: 20rpx;
            overflow: hidden;

            image {
              width: 100%;
              height: 100%;
              border-radius: 20rpx;
            }
          }

          .cashier-tablin-nie-left-text {
            width: 280rpx;
            height: 100%;
		    margin-left: 15rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;

            .cashier-tablin-nie-left-text-top {
              width: 100%;
              font-size: 36rpx;
              font-weight: 500;
              color: #333333;
              display: inline-block;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .cashier-tablin-nie-left-text-bottom {
              width: 100%;
              height: 69rpx;
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              justify-content: space-between;
              color: #333333;
              font-size: 24rpx;

              .cashier-tablin-nie-left-text-bottom-in {
                width: 100%;
                display: inline-block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }

              .cashier-tablin-nie-left-text-bottom-it {
                width: 100%;
                display: inline-block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
        }

        .cashier-tablin-nie-right {
          width: 146rpx;
          height: 100%;

          image {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }

  .cashier-list {
    width: 686rpx;
    height: 400rpx;
    background-color: #ffffff;
    margin-top: 206rpx;
    border-radius: 16rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    .cashier-list-top {
      width: 634rpx;
      height: 30rpx;
      margin-top: 10rpx;
      display: flex;
      justify-content: space-between;

      .cashier-list-top-left {
        font-size: 30rpx;
        width: 150rpx;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .yi {
          position: relative;

          .cashier-list-top-left-yisss {
            position: absolute;
            top: 39rpx;
            width: 100%;
            height: 6rpx;
            background: #1f7cff;
            border-radius: 3rpx;
          }
        }
      }

      .cashier-list-top-right {
        width: 124rpx;
        height: 100%;
        display: flex;
        justify-content: space-between;
        font-size: 24rpx;
        font-weight: 400;
        color: #999999;

        .cashier-list-top-right-icon {
          width: 16rpx;
          height: 16rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    .cashier-list-tbot {
      width: 570rpx;
      height: 250rpx;
      display: flex;
      align-content: space-between;
      flex-wrap: wrap;
      justify-content: space-between;

      .yis {
        width: 33%;
        height: 82rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        color: #333333;

        .sgjd {
          font-size: 36rpx;
          font-weight: bold;
        }

        .sf {
          font-size: 26rpx;
          font-weight: 400;
        }
      }

      // .cashier-list-tbot-sjd {
      // 	width: 100%;
      // 	height: 88rpx;
      // 	display: flex;
      // 	justify-content: space-between;
      // 	align-items: center;
      // .yis {
      // 	height: 100%;
      // 	display: flex;
      // 	flex-direction: column;
      // 	justify-content: space-between;
      // 	align-items: center;
      // 	color: #333333;

      // 	.sgjd {
      // 		font-size: 36rpx;
      // 		font-weight: bold;
      // 	}

      // 	.sf {
      // 		font-size: 26rpx;
      // 		font-weight: 400;
      // 	}
      // }
      // }
    }
  }

  .cashier-jilu {
    width: 686rpx;
    height: 100%;
    background: #ffffff;
    border-radius: 16rpx;
    margin: 26rpx 0 26rpx 0;
    display: flex;
    flex-direction: column;
    align-items: center;

    .cashier-jilu-top {
      width: 634rpx;
      margin-top: 49rpx;
      display: flex;
      justify-content: flex-start;
      font-size: 30rpx;
      font-weight: 600;
      align-items: center;
      color: #333333;
    }

    .cashier-jilu-nei {
      width: 634rpx;
      margin-top: 32rpx;
      display: flex;
      flex-direction: column;
      align-items: center;

      .cashier-jilu-nei-yis {
        width: 100%;
        height: 86rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 65rpx;

        .cashier-jilu-nei-yis-left {
          width: 289rpx;
          height: 100%;
          display: flex;

          .cashier-jilu-nei-yis-left-mei {
            width: 86rpx;
            height: 86rpx;
            border-radius: 100%;
            overflow: hidden;

            image {
              width: 100%;
              height: 100%;
              border-radius: 100%;
              overflow: hidden;
            }
          }

          .cashier-jilu-nei-yis-left-yins {
            width: 187rpx;
            height: 86rpx;
            margin-left: 16rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: flex-start;

            .tetxsad {
              display: inline-block;
              width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-size: 30rpx;
              font-weight: 500;
              color: #333333;
            }

            .sdffget {
              font-size: 26rpx;
              font-weight: normal;
              color: #999999;
            }
          }
        }

        .cashier-jilu-nei-yis-right {
          height: 100%;
          font-size: 30rpx;
          font-weight: normal;
          color: #333333;
          line-height: 86rpx;
        }
      }
    }
  }
}
</style>