xk-client-wx/pages/home/home.vue

<template>
  <view class="content safe-area-inset-bottom">
    <view class="head">
      <!-- 门店 -->
      <view class="store" @click="toStore">
        {{infoList.store['name'] || storeinfo[0].store['name'] || info.name || ''}}
        <text class="iconfont icon-qiehuan"></text>
      </view>

      <!-- 定位 -->
      <view class="area">
        <view class="place">
          <text class="iconfont icon-dizhi"></text>
          {{infoList.store['position'] || storeinfo[0].store.position || info.position || ''}}
        </view>

<!--        <view class="place" @click="toSee">-->
<!--          <text class="iconfont icon-saoyisao" style="font-size: 30rpx;"></text>-->
<!--          扫一扫-->
<!--        </view>-->
      </view>

      <!-- 搜索 -->
<!--      <view class="search">-->
<!--        <u-search placeholder="请输入商品名称" bg-color="#fff" border-color="#F8FAFC" :show-action="false"-->
<!--                  :clearabled="true" shape="round" :disabled="true" @click="tosearch"></u-search>-->
<!--      </view>-->

    </view>

    <!-- 图片展示 -->
    <view class="section">
      <u-swiper :list="list" :img-mode="aspectFill" :height="300" :interval="4000" @click="toBanner"></u-swiper>
      <!-- <image class="banner" mode="aspectFill" src="/static/home/banner.png"></image> -->
    </view>

    <!-- 导航栏 -->
    <view class="nav" v-if="storeType === '0'">
      <view class="nav_service" @click="goYard(1)">
        <view class="nav_service_img">
          <image src="../../static/home/bg1.png" mode=""></image>
        </view>
        <view class="nav_service_title">
          <!--					挂号咨询-->
          到店挂号
        </view>
      </view>

      <!--			<view class="nav_service" @click="golist(2)">-->
      <!--				<view class="nav_service_img">-->
      <!--					<image src="../../static/home/bg2.png" mode=""></image>-->
      <!--				</view>-->
      <!--				<view class="nav_service_title">-->
      <!--					线上复诊-->
      <!--				</view>-->
      <!--			</view>-->
      <view class="nav_service" @click="golist(3)">
        <view class="nav_service_img">
          <image src="../../static/home/bg2.png" mode=""></image>
        </view>
        <view class="nav_service_title">
          预约购药
        </view>
      </view>
    </view>

    <!--		&lt;!&ndash; 导航栏第二行 &ndash;&gt;-->
    <!--		<view class="nav">-->
    <!--      <view class="nav_service" @click="golist(3)">-->
    <!--        <view class="nav_service_img">-->
    <!--          <image src="../../static/home/bg2.png" mode=""></image>-->
    <!--        </view>-->
    <!--        <view class="nav_service_title">-->
    <!--          预约购药-->
    <!--        </view>-->
    <!--      </view>-->
    <!--		</view>-->

    <!-- 导航栏第二行 -->
    <view class="nav" v-if="storeType === '1'">
      <view class="nav_service" @click="golist(3)">
        <view class="nav_service_img">
          <image src="../../static/home/bg2.png" mode=""></image>
        </view>
        <view class="nav_service_title">
          预约购药
        </view>
      </view>
    </view>


    <view v-if="storeType === '0'" class="doctor_list" @click="goYard(1)">
      医生列表
      <view class="info">
        更多 <text class="iconfont icon-jiantou1"></text>
      </view>
    </view>

    <!-- 医生列表  -->
    <view v-if="storeType === '0'" class="doctor-card" @click="goLookDoctor(item.id)" v-for="(item,index) in doctorList" :key="item.id">
      <view class="card-content">
        <!-- 医生头像 -->
        <image :src="item.avatar || '/static/mine/avatar_1.png'" mode="aspectFill" class="doctor-avatar"></image>

        <!-- 医生信息 -->
        <view class="doctor-info">
          <!-- 姓名和职称 -->
          <view class="name-section">
            <text class="doctor-name">{{item.name}}</text>
            <view class="title-badge">{{item.title}}</view>
          </view>

          <!-- 科室和医院 -->
          <view class="department-section">
            <text class="iconfont icon-location"></text>
            <text class="department">{{item.depart}} | {{item.store}}</text>
          </view>

          <!-- 擅长领域 -->
          <view class="expertise">
            <text class="expertise-label">擅长：</text>
            <text class="expertise-content">{{item.good_at}}</text>
          </view>

          <!-- 统计信息 -->
          <view class="stats">
            <view class="stat-item">
              <text class="stat-value">{{item.inquiry_num}}</text>
              <text class="stat-label">问诊量</text>
            </view>
            <view class="stat-item">
              <text class="stat-value">{{item.accept_percent}}</text>
              <text class="stat-label">接诊率</text>
            </view>
            <view class="consult-btn">
              <text class="iconfont icon-consult"></text>
              咨询
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 药店版本 -->
    <view v-if="storeType === '1'" class="doctor_list" @click="golist(3)">
      药品列表
      <view class="info">
        更多 <text class="iconfont icon-jiantou1"></text>
      </view>
    </view>
    <!-- 医生列表  -->
    <view v-if="storeType === '1'" class="doctor-card" @click="goProductDetail(item)" v-for="(item,index) in productList" :key="item.drug.id">
      <view class="card-content">
        <!-- 医生头像 -->
        <image :src="item.drug.image || '/static/mine/avatar_1.png'" mode="aspectFill" class="doctor-avatar"></image>

        <!-- 医生信息 -->
        <view class="doctor-info">
          <!-- 姓名和职称 -->
          <view class="name-section">
            <text class="doctor-name">{{item.drug.drug_name}}</text>
            <view class="title-badge">{{item.drug.is_otc ? 'OTC' : '处方药'}}</view>
          </view>

          <!-- 科室和医院 -->
          <view class="department-section">
            <text class="iconfont icon-location"></text>
            <text class="department">{{item.drug.category}}</text>
          </view>

          <!-- 擅长领域 -->
          <view class="expertise">
            <text class="expertise-label">价格：</text>
            <text class="expertise-content">{{item.price}}</text>
          </view>

          <!-- 统计信息 -->
          <view class="stats">
            <view class="stat-item">
              <text class="stat-value">{{item.sales}}</text>
              <text class="stat-label">销量</text>
            </view>
            <view class="consult-btn" @click.stop="buyProduct(item)">
              <text class="iconfont icon-consult"></text>
              购买
            </view>
          </view>
        </view>
      </view>
    </view>


    <!-- 遮罩层 -->
    <view class="bg-" v-if="bgShow" @click="bgShow=false">
      <image src="/static/home/bg.png" mode=""></image>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import {
  doctorList,
  getBanner,
  getToken,
  storeChange,
  storeInfo,
  storeList
} from '../../request/api/api'
import { getStoreDrugListBySalespersonApi } from "@/request/api/product";

export default {
  data() {
    return {
      storeId: 0,
      storeType: 0,
      storeinfo: [],
      doctorList: [],
      productList: [],
      show: true,
      showed: false,
      shopList: {},
      flag: false, //防止多次点击
      headerTitle: "", // 标题
      infoList: "", // 扫码 门店
      list: [
        // '/static/home/banner.png',
        // '/static/home/banner.png',
        // '/static/home/banner.png'
      ],
      info: [],
      bgShow: false,
      isShow_envVersion: true
    }
  },
  onLoad() {

    const token = uni.getStorageSync('token')
    const userInfo = uni.getStorageSync('userinfo')
    if (!token || !userInfo) {
      // 跳转到登录页，不要返回的
      uni.navigateTo({
        url: '/pages/home/index'
      })
    }
    this.isShow_envVersion = uni.getStorageSync('isShow_envVersion')
    if (this.isShow_envVersion === false) {

      this.getList();
      // if (this.doctorList.length === 0) {
      //   this.getList();
      // }
    }
  },
  created() {
    const token = uni.getStorageSync('token')
    const userInfo = uni.getStorageSync('userinfo')
    if (!token || !userInfo) {
      // 跳转到登录页，不要返回的
      uni.navigateTo({
        url: '/pages/home/index'
      })
    }

  },
  onReady() {
    console.log(uni.getStorageSync('store_id'), '3')
    if (uni.getStorageSync('store_id')) {
      this.getStore();
    } else {
      this.goNewlist()
    }
    uni.setNavigationBarTitle({
      title: this.headerTitle,
      success() {
      }
    });
    uni.setNavigationBarColor({
      frontColor: '#000000', //前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000
    })
  },
  methods: {
    goYard(type) {
      //订阅消息

      uni.navigateTo({
        url: '/pages/Inquiries/Inquiries?type=' + type
      })
      // uni.requestSubscribeMessage({
      // 	tmplIds: ['JdSs08cMSiL17xwwHZ8fZ5UBUqeY0eKAuvyW7n4Fl20',
      // 		'OERMugiahk-aKRVH9GHmdJCRBE3yldzEKTzbMCJhY6U',
      // 		'p-Ix0uIuwPKxm-_yKDlI8mkI-niUgPtaMUZyAaa5vvA'
      // 	],
      // 	complete: (res) => {
      // 		// console.log(res, 'xxxxxxxxxxxx');
      // 		uni.navigateTo({
      // 			url: '/pages/Inquiries/Inquiries?type=' + 1
      // 		})
      // 	}
      // })
    },
    // 线上复诊
    golist(type) {
      if (type === 3) {
        return uni.navigateTo({
          url: '/subPackages/product/product?doctor_id=' + 39 + '&register_type=3'
        })
      }
      uni.navigateTo({
        // url: '/subPackages/product/product'
        url: '/pages/Inquiries/Inquiries?type=' + type
      })
      // // 提醒用户正在开发
      // uni.showToast({
      //   title: '正在开发中',
      //   icon: 'none',
      //   duration: 2000
      // })
      // return;
      // // this.bgShow = true
      // let that = this
      // if (!this.flag) {
      // 	this.getH5()
      // 	this.flag = true
      // 	uni.showLoading({
      // 		title: "加载中"
      // 	});
      //
      // 	setTimeout(() => {
      // 		uni.hideLoading();
      // 		if (uni.getStorageSync('token_platform_id')) {
      // 			uni.navigateTo({
      // 				url: '/subPackages/my/my_online',
      // 				success: () => {
      // 					setTimeout(() => {
      // 						that.flag = false;
      // 					}, 200)
      // 					uni.hideLoading();
      // 				},
      // 				fail: () => {
      // 					setTimeout(() => {
      // 						that.flag = false;
      // 					}, 200)
      // 					uni.hideLoading();
      // 				}
      // 			})
      // 		}
      // 	}, 600)
      // }
    },
    getH5() {
      // 进入token
      getToken({
        method: "post",
        data: {
          user_id: uni.getStorageSync('user_id'),
          avatarurl: uni.getStorageSync('userinfo')['avatarurl'],
          mobile: uni.getStorageSync('userinfo')['mobile'],
          nickname: uni.getStorageSync('userinfo')['nickname'],
          openid: uni.getStorageSync('userinfo')['openid'],
          session_key: uni.getStorageSync('userinfo')['session_key'],
          store_id: uni.getStorageSync('store_id') || '11001',
        },
      }).then((res) => {
        if (res.data.errcode == 0) {
          // uni.setStorageSync('platform_id', res.data.data.platform_id)
          uni.setStorageSync('token_platform_id', res.data.data.token)
        } else {
          this.$refs.uToast.show({
            title: res.data.msg,
            type: 'default',
            icon: false
          })
        }
      })
    },
    tosearch() {
      uni.navigateTo({
        url: '/subPackages/shop/search-home'
      })
    },
    toStore() {
      uni.navigateTo({
        url: '/subPackages/my/mystore'
      })
    },
    goLookDoctor(id, sts_id) {
      if (!sts_id) {
        let sts_id = uni.getStorageSync('store_id')
      }

      setTimeout(() => {
        //订阅消息
        uni.requestSubscribeMessage({
          tmplIds: ['JdSs08cMSiL17xwwHZ8fZ5UBUqeY0eKAuvyW7n4Fl20',
            'OERMugiahk-aKRVH9GHmdJCRBE3yldzEKTzbMCJhY6U',
            'p-Ix0uIuwPKxm-_yKDlI8mkI-niUgPtaMUZyAaa5vvA'
          ],
          complete: (res) => {
            // console.log(res, 'xxxxxxxxxxxx');
            uni.navigateTo({
              url: '/subPackages/doctor/doctor-detail?store_id=' + sts_id +
                  '&id=' + id
            })
          }
        })
      }, 200)
    },

    // 扫码
    toSee() {
      uni.scanCode({
        success: function(res) {
          // console.log('条码类型：' + res.scanType);
          // console.log('条码内容：' + res.result);
          uni.showToast({
            title: '扫码成功',
            duration: 2000,
            icon: "success"
          });
        },
      });
    },

    // 门店
    getStore() {
      if (uni.getStorageSync('store_id')) {
        this.show = false
        storeInfo({
          method: "post",
          data: {
            store_id: uni.getStorageSync('store_id') || '11001',
          }
        }).then((res) => {
          // console.log(res, 'info');
          if (res.data.errcode == 0) {
            this.storeType = res.data.data.store['type']
            this.infoList = res.data.data
            this.headerTitle = res.data.data.store['name']
            uni.setNavigationBarTitle({
              title: this.headerTitle,
              success() {
              },
              fail() {
                this.getStore()
              }
            });
            uni.setNavigationBarColor({
              frontColor: '#000000', //前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000
            })
            // this.getList();
            this.getBannered();
          }
        })
      } else {
        console.log(uni.getStorageSync('store_id'))
        this.goNewlist()
      }
    },

    /**
     * 获取绑定的用户诊所，选择最后登录的
     */
    goNewlist() {
      storeList({
        method: "post",
        data: {
          store_id: uni.getStorageSync('store_id') || '11001',
        }
      }).then((res) => {
        // console.log(res, 'list');
        if (res.data.errcode == 0) {
          this.show = res.data.data.open_issue
          this.showed = this.show
          if (this.isShow_envVersion) {
            this.shopList = res.data.data.list
            this.getBannered();
          } else {
            this.storeinfo = res.data.data.list.filter((item) => item.is_online == 1)
            console.log(this.storeinfo, 'storeinfo')
            uni.setStorageSync('store_id', this.storeinfo[0].store.id)
            this.headerTitle = this.storeinfo[0].store['name']
            // this.storeType = this.storeinfo[0].store['type']
            uni.setNavigationBarTitle({
              title: this.headerTitle,
              success() {
              }
            });
            uni.setNavigationBarColor({
              frontColor: '#000000', //前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000
            })
            // this.getList();
            this.getBannered();
          }

        } else {
          // uni.removeStorageSync('token')
          if (this.isShow_envVersion) {
            uni.navigateTo({
              url: '/pages/home/index'
            })
          } else {
            uni.navigateTo({
              url: '/pages/home/index'
            })
          }
        }
      })

    },

    goList(id) {
      uni.navigateTo({
        url: '/pages/home/index-list?type=' + 1 + '&id?=' + id
      })
    },

    // 医生列表
    getList() {
      this.doctorList = [];
      doctorList({
        method: "post",
        data: {
          store_id: uni.getStorageSync('store_id') || '11001',
        }
      }).then((res) => {
        if (res.data.errcode === 0) {
          this.doctorList = (res.data.data.list).slice(0, 5)
        }
      })
    },

    // 切换门店
    toChang(e) {
      // console.log(e, 'id');
      storeChange({
        method: "post",
        data: {
          store_id: e
        }
      }).then((res) => {
        if (res.data.errcode == 0) {
          this.getStore()
          this.getList();
          // uni.showToast({
          // 	title: '切换成功',
          // 	duration: 2000,
          // 	icon: "success"
          // });
        }
      })
    },

    // 门店详情--轮播图
    getBannered() {
      getBanner({
        method: "post",
        data: {
          store_id: uni.getStorageSync('store_id') || '11001',
        }
      }).then((res) => {
        console.log(res, 'info');
        if (res.data.errcode == 0) {
          this.info = res.data.data
          this.urlInfo = res.data.data.nav
          this.storeType = res.data.data.type
          console.log(this.storeType)
          this.list = (res.data.data.nav).map((item) => {
            return item.pic
          })
        }
      })
    },
    toBanner(e) {
      if (!this.urlInfo[e].external_link) {
        return
      }
      if (this.urlInfo[e].link_type == 1 && this.isShow_envVersion == false) {
        // 内部
        uni.navigateTo({
          url: this.urlInfo[e].external_link,
          success() {
            // console.log(this.urlInfo[e].external_link, 'aaaaaaaaaa');
          }
        })
      } else {
        // link_type==2 外部
        uni.navigateTo({
          url: '/pages/home/home-banner?id=' + this.urlInfo[e].external_link,
          success() {
            // console.log(this.urlInfo[e].external_link, 'aaaaaaaaaa');
          }
        })
      }
    },

    getProductList() {
      getStoreDrugListBySalespersonApi({
        store_id: uni.getStorageSync('store_id') || '11001',
        page: 1,
        limit: 5  // 首页只展示5个产品
      }).then((res) => {
        if (res.data.code == 0) {
          this.productList = res.data.result.records;
        }
      })
    },

    goProductDetail(item) {
      uni.navigateTo({
        url: `/subPackages/product/symptoms?id=${item.drug.id}&drug_name=${item.drug.drug_name}&is_otc=${item.drug.is_otc}&image=${item.drug.image}&price=${item.price}`
      });
    },

    buyProduct(item) {
      uni.navigateTo({
        url: `/subPackages/product/product?doctor_id=39&register_type=3`
      });
    }
  },
  mounted() {

    console.log('加载js')
    const token = uni.getStorageSync('token')
    const id = uni.getStorageSync('store_id')
    const d_id = uni.getStorageSync('doctors_id')
    const d_store = uni.getStorageSync('st_id')
    if (token && id) {
      console.log(id, 'ssssss')
      this.toChang(id)
    }
    if (d_id && token && d_store) {
      this.goLookDoctor(d_id, d_store)
    }
  },
  onShow() {
    console.log('显示')
    this.storeId = uni.getStorageSync('store_id');
    this.infoList = ""
    this.getStore();
    this.getList();
    this.getProductList();
  },
}
</script>

<style lang="scss" scoped>
.content {
  background-color: #fff;
  width: 750rpx;
  max-height: 100%;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
  position: relative;

  .bg- {
    min-width: 100vw;
    min-height: 100vh;
    background: rgba(0, 0, 0, 0.46);
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;

    image {
      width: 510rpx;
      height: 621rpx;
      vertical-align: middle;
      margin: 200rpx auto 0;
    }
  }

  .head {
    width: 750rpx;
    height: 390rpx;
    padding: 20rpx;
    background: linear-gradient(180deg, #298DFF 0%, #9ECBFF 70%, #FFFFFF 100%);

    .search {
      width: 710rpx;
      margin: 20rpx auto 0;
    }

    .store {
      width: 700rpx;
      height: 78rpx;
      line-height: 78rpx;
      font-size: 28rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #FFFFFF;
      margin: 0rpx auto 0rpx;

      .iconfont {
        font-size: 27rpx;
        color: #fff;
        margin-left: 16rpx;
      }
    }

    .area {
      width: 700rpx;
      height: 64rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0rpx auto;

      .place {
        font-size: 26rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;

        .iconfont {
          font-size: 25rpx;
          color: #FFFFFF;
          margin-right: 10rpx;
        }
      }
    }
  }

  .section {
    width: 710rpx;
    margin: -180rpx auto 30rpx;
    height: 300rpx;

    .banner {
      width: 100%;
      height: 100%;
    }
  }

  .nav {
    width: 710rpx;
    background: #FFFFFF;
    border-radius: 15rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 30rpx auto;

    .nav_service {
      width: 348rpx;
      height: 178rpx;
      display: flex;
      align-items: center;
      justify-content: space-around;
      background: url('/static/home/bg01.png') no-repeat;
      background-size: 100% 100%;
      border-radius: 24rpx;

      .nav_service_img {
        width: 116rpx;
        height: 116rpx;
        vertical-align: middle;

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

      .nav_service_title {
        font-size: 40rpx;
        font-family: PingFang SC-Heavy, PingFang SC;
        font-weight: 800;
        color: #FFFFFF;
      }
    }

    .nav_service:last-child {
      background: url('/static/home/bg02.png') no-repeat;
      background-size: 100% 100%;
    }
  }

  .doctor_list {
    width: 710rpx;
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #232323;
    margin: 44rpx auto 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .info {
      font-size: 28rpx;
      font-weight: 500;
      color: #666666;
    }
  }

  /* 医生卡片样式 */
  .doctor-card {
    background: #FFFFFF;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 12rpx rgba(65, 117, 238, 0.08);
    margin-bottom: 24rpx;
    overflow: hidden;
    transition: all 0.25s ease;

    &:active {
      transform: translateY(2rpx);
      box-shadow: 0 2rpx 6rpx rgba(65, 117, 238, 0.1);
    }
  }

  .card-content {
    display: flex;
    padding: 24rpx;
  }

  .doctor-avatar {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    border: 2rpx solid #f0f5ff;
    flex-shrink: 0;
    margin-right: 20rpx;
  }

  .doctor-info {
    flex: 1;
    min-width: 0;
  }

  .name-section {
    display: flex;
    align-items: center;
    margin-bottom: 12rpx;
  }

  .doctor-name {
    font-size: 32rpx;
    font-weight: bold;
    color: #232323;
    margin-right: 16rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .title-badge {
    font-size: 22rpx;
    color: #4175EE;
    background: #eef4ff;
    border-radius: 8rpx;
    padding: 4rpx 12rpx;
    flex-shrink: 0;
  }

  .department-section {
    display: flex;
    align-items: center;
    margin-bottom: 16rpx;

    .iconfont {
      font-size: 24rpx;
      color: #888;
      margin-right: 6rpx;
    }

    .department {
      font-size: 24rpx;
      color: #666;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .expertise {
    display: flex;
    font-size: 26rpx;
    color: #444;
    line-height: 1.4;
    margin-bottom: 16rpx;

    .expertise-label {
      color: #666;
      flex-shrink: 0;
    }

    .expertise-content {
      flex: 1;
      min-width: 0;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12rpx;
    border-top: 1rpx dashed #e0e7ff;
  }

  .stat-item {
    flex: 1;
    text-align: center;
  }

  .stat-value {
    font-size: 32rpx;
    font-weight: bold;
    color: #4175EE;
    display: block;
    line-height: 1.2;
  }

  .stat-label {
    font-size: 24rpx;
    color: #888;
    display: block;
  }

  .consult-btn {
    background: #4175EE;
    color: white;
    border-radius: 40rpx;
    padding: 10rpx 24rpx;
    font-size: 26rpx;
    display: flex;
    align-items: center;

    .iconfont {
      font-size: 24rpx;
      margin-right: 6rpx;
    }

    &:active {
      background: #3366d1;
    }
  }


  .lists {
    width: 710rpx;
    background: linear-gradient(180deg, #E2F1FF 0%, #FBFDFF 54%, #FFFFFF 100%);
    border-radius: 24rpx;
    padding: 30rpx;
    margin: 32rpx auto 52rpx;
    box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.08);

    .list_left {
      display: flex;
      justify-content: space-around;
      margin-bottom: 22rpx;

      image {
        width: 200rpx;
        height: 200rpx;
        margin-right: 20rpx;
      }

      .it {
        width: 450rpx;
        font-family: PingFang SC-Regular, PingFang SC;

        .it_name {
          height: 80rpx;
          font-size: 28rpx;
          font-weight: bold;
          color: #232323;
        }

        .it_info {
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          text-overflow: ellipsis;
          overflow: hidden;

          font-size: 24rpx;
          font-weight: 400;
          color: #999999;
          margin: 12rpx 0 34rpx 0;
        }

        .it_price {
          display: flex;
          align-items: center;

          .picture {
            width: 140rpx;
            height: 60rpx;
            line-height: 58rpx;
            text-align: center;
            border-radius: 4rpx 4rpx 4rpx 4rpx;
            border: 2rpx solid #4175EE;
            font-size: 24rpx;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: bold;
            color: #4175EE;
            margin: 0 30rpx 0 0;
          }
        }
      }
    }

    .card {

      .list_nums {
        height: 34rpx;
        font-size: 28rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 500;
        color: #666666;
        margin: 18rpx 0 24rpx;
        display: flex;
        align-items: center;

        .txt {
          margin-right: 30rpx;

          text {
            font-size: 28rpx;
            color: #FEA54C;
            margin: 0 10rpx;
          }
        }
      }

      .list_going {
        font-size: 24rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #232323;
        line-height: 44rpx;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        overflow: hidden;
        margin: 16rpx auto;
      }

      .list_price {
        display: flex;
        align-items: center;

        .picture {
          width: 140rpx;
          height: 60rpx;
          line-height: 58rpx;
          text-align: center;
          border-radius: 4rpx 4rpx 4rpx 4rpx;
          border: 2rpx solid #4175EE;
          font-size: 24rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: #4175EE;
          margin: 0 30rpx 0 0;
        }
      }
    }
  }
}
</style>