promoProduct.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758
  1. <template>
  2. <view class="scrollPage">
  3. <!-- head -->
  4. <view class="scrollPage-header">
  5. <view :style="{height:statusBarHeight+'px'}"></view>
  6. <view class="header-title">
  7. <view class="header-left" @click="goBack">
  8. <image style="width: 16px; height: 16px;margin-right:3px;" mode="aspectFit" src="./static/arrow-left.png"></image>
  9. <text>返回</text>
  10. </view>
  11. <view class="header-title"><text class="ellipsis-one" overflow="ellipsis">{{title}}</text></view>
  12. <view class="header-right"></view>
  13. </view>
  14. </view>
  15. <!-- body -->
  16. <scroll-view
  17. class="scrollPage-body"
  18. :style="{height: (screenHeight - statusBarHeight - safeAreaBottom - 94) + 'px'}"
  19. scroll-y="true"
  20. type="custom"
  21. :bounces="false"
  22. @scrolltolower="reachBottom">
  23. <!-- 搜索,吸顶 -->
  24. <sticky-header>
  25. <view class="search-head">
  26. <uni-search-bar radius="100" placeholder="请输入产品名称/轮胎规格" clearButton="auto" cancelButton="none" @confirm="searchList" @clear="searchList" />
  27. </view>
  28. </sticky-header>
  29. <!-- 产品列表 -->
  30. <productItem
  31. v-for="(item,index) in list"
  32. :key="index"
  33. :list="item"
  34. :index="index"
  35. :itemWidth="(screenWidth*0.94-screenWidth*0.03)*0.5"
  36. :gap="screenWidth*0.03"
  37. @chooseProduct="chooseProduct"
  38. ></productItem>
  39. <!-- loading -->
  40. <view class="loading-bar" v-if="list.length && (loading||loadEnd)">{{loadText}}</view>
  41. <view class="empty-bar" v-if="total==0&&!loading">
  42. <image mode="aspectFit" :src="empty.imgUrl"></image>
  43. <view>{{empty.tip}}</view>
  44. </view>
  45. </scroll-view>
  46. <!-- footer -->
  47. <view class="scrollPage-footer">
  48. <view>
  49. <view class="bottom-bar-left">
  50. <view class="bottom-bar-left-item">
  51. <view class="bottom-bar-left-item-icon" @click="openChoose">
  52. <image style="width: 20px; height: 20px;" mode="aspectFit" src="./static/cart.png"></image>
  53. <text class="badge" v-if="totalNum">{{totalNum>99?'99+':totalNum}}</text>
  54. </view>
  55. </view>
  56. <view class="bottom-bar-left-item">
  57. <!-- 合计:<view class="price-txt">¥<text>{{totalAmount}}</text></view> -->
  58. </view>
  59. </view>
  60. <view :class="'bottom-bar-right'" @click="submitOrder">
  61. <view class="bottom-bar-right-item">去结算</view>
  62. </view>
  63. </view>
  64. <view :style="{height:safeAreaBottom+'px'}"></view>
  65. </view>
  66. <!-- 已选产品 -->
  67. <page-container
  68. :show="showChoosePopu"
  69. :round="true"
  70. :z-index="10"
  71. position="bottom"
  72. custom-style="height:80%"
  73. @afterenter="openRender"
  74. @afterleave="closePopu">
  75. <view class="popup-body" v-if="showSwipeAction">
  76. <scroll-view
  77. :style="{width:screenWidth + 'px',height:'100%'}"
  78. scroll-y="true"
  79. type="custom"
  80. >
  81. <sticky-header>
  82. <view class="choose-title">
  83. <view class="choose-left">
  84. <view>已选<text class="p-nums">{{chooseLength}}</text>款产品</view>
  85. <!-- <button @click="claerChoose" size="mini" type="warn" plain>清空列表</button> -->
  86. <!-- <button class="editBtn" @click="handleEditChoose" size="mini" type="primary" plain>{{editChoose?'完成':'编辑'}}</button> -->
  87. <view class="clearBtn" @click="claerChoose">
  88. <text>清空列表</text>
  89. </view>
  90. <view class="editBtn" @click="handleEditChoose">
  91. <text>{{editChoose?'完成':'编辑'}}</text>
  92. </view>
  93. </view>
  94. <view class="choose-close" @click="showChoosePopu=false">
  95. <uni-icons type="closeempty" size="28"></uni-icons>
  96. </view>
  97. </view>
  98. </sticky-header>
  99. <chooseProductItem
  100. v-for="(item, index) in showList"
  101. :key="item.id"
  102. :index="index"
  103. :list="item"
  104. :edit="editChoose"
  105. @changeQty="changeQty"
  106. @remove="removeChoose">
  107. </chooseProductItem>
  108. <view style="min-height: 180rpx;"></view>
  109. </scroll-view>
  110. <view class="choose-footer">
  111. <view>
  112. <view class="choose-footer-left">
  113. <view class="choose-footer-left-item">
  114. <!-- 总数:<view><text class="p-nums">{{totalNum}}</text></view> -->
  115. </view>
  116. <view class="choose-footer-left-item">
  117. 合计:<view class="price-txt">¥<text>{{totalAmount}}</text></view>
  118. </view>
  119. </view>
  120. <view class="choose-footer-right bg-1" @click="submitOrder">
  121. <view class="choose-footer-right-item">确认采购</view>
  122. </view>
  123. </view>
  124. <view :style="{height:safeAreaBottom+'px'}"></view>
  125. </view>
  126. </view>
  127. </page-container>
  128. </view>
  129. </template>
  130. <script>
  131. import {
  132. mapState,
  133. mapMutations,
  134. } from 'vuex'
  135. import { queryPromoProductByPage } from '@/api/video.js'
  136. import { purchaseSave } from '@/api/purchase.js'
  137. import productItem from '@/pagesB/components/productItemSkline.vue'
  138. import chooseProductItem from '@/pagesB/components/chooseProductItemSkline.vue'
  139. export default {
  140. components:{
  141. productItem,
  142. chooseProductItem
  143. },
  144. data() {
  145. return {
  146. title: '促销产品列表',
  147. pageNo:1,
  148. pageSize:16,
  149. total:0,
  150. list:[],
  151. loading:false,
  152. loadEnd: false,
  153. loadText: '加载中...',
  154. empty: {
  155. tip: '暂无产品',
  156. imgUrl: '/static/nodata.png'
  157. },
  158. queryWord:'',
  159. promoActiveSn:'',
  160. screenWidth: 750,
  161. screenHeight: 0,
  162. statusBarHeight: 44,
  163. safeAreaBottom: 0,
  164. // 已选弹框
  165. showChoosePopu: false,
  166. showSwipeAction: false,
  167. chooseList:[],
  168. editChoose: false,
  169. choosePageSize: 12,
  170. // 数量,合计
  171. chooseLength: 0, //已选产品总款数
  172. totalAmount: 0, //已选产品总金额
  173. totalNum: 0, //已选产品总数量
  174. };
  175. },
  176. computed: {
  177. ...mapState(['hasLogin']),
  178. userInfo(){
  179. return this.$store.state.vuex_userInfo
  180. },
  181. fristLength(){
  182. return this.chooseList.length > 0 ? this.chooseList[0].length : 0
  183. },
  184. showList(){
  185. return this.showSwipeAction ? this.chooseList : []
  186. }
  187. },
  188. onLoad(opts) {
  189. this.title = opts.title||'促销产品列表'
  190. this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
  191. this.screenWidth = uni.getSystemInfoSync().windowWidth
  192. this.screenHeight = uni.getSystemInfoSync().windowHeight
  193. this.safeAreaBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
  194. // 清空临时数据
  195. this.$store.state.vuex_tempData = null
  196. this.promoActiveSn = opts.promoActiveSn
  197. // 查询列表
  198. this.getList()
  199. this.chooseList = this.getCacheList()
  200. this.getChooseHeji()
  201. },
  202. onUnload(){
  203. // 存储已选列表值
  204. const hasCache = this.$store.state.vuex_cartList.find(k => k.sn == this.promoActiveSn)
  205. if(hasCache){
  206. hasCache.list = this.chooseList
  207. }else{
  208. this.$store.state.vuex_cartList.push({sn:this.promoActiveSn,list: this.chooseList})
  209. }
  210. this.$u.vuex('vuex_cartList', this.$store.state.vuex_cartList)
  211. // 清空数据
  212. this.chooseList = null
  213. this.list = null
  214. },
  215. methods: {
  216. goBack() {
  217. uni.navigateBack();
  218. },
  219. // 从缓存获取数据
  220. getCacheList(){
  221. const cacheList = this.$store.state.vuex_cartList.find(k => k.sn == this.promoActiveSn)
  222. return cacheList ? JSON.parse(JSON.stringify(cacheList.list)) : []
  223. },
  224. // 滚动到底部
  225. reachBottom() {
  226. if(!this.loading && !this.loadEnd){
  227. this.pageNo++
  228. this.getList()
  229. }
  230. },
  231. // 搜索
  232. searchList(event){
  233. this.loadEnd = false
  234. this.loadText = '加载中...'
  235. this.queryWord = event.value
  236. this.list = []
  237. this.pageNo = 1
  238. this.getList()
  239. },
  240. // 列表查询
  241. getList(){
  242. this.loading = true
  243. queryPromoProductByPage({
  244. pageNo: this.pageNo,
  245. pageSize: this.pageSize,
  246. queryWord: this.queryWord,
  247. promoActiveSn: this.promoActiveSn
  248. }).then(res => {
  249. this.loading = false
  250. if(res.status == 200){
  251. this.total = res.data.count
  252. if(this.total){
  253. const list = res.data.list || []
  254. const ret = []
  255. // 更新已选状态
  256. list.forEach(k => {
  257. // 如果筛选或分页后,更新页面列表产品数量
  258. const row = this.getChooseItemById(k.id)
  259. const hasChecked = row.p>=0 && row.s>=0
  260. ret.push({
  261. id: k.id,
  262. cost: k.cost,
  263. checked: hasChecked ? true : false,
  264. qty: hasChecked ? this.chooseList[row.p][row.s].qty : 0,
  265. productCode: k.productCode,
  266. productSn: k.productSn,
  267. productImage: k.productImage,
  268. productName: k.productName,
  269. productOrigCode: k.productOrigCode,
  270. promoActiveSn: k.promoActiveSn,
  271. promoRuleSn: k.promoRuleSn,
  272. promoRuleValue: k.promoRuleValue,
  273. promoRuleType: k.promoRuleType,
  274. })
  275. })
  276. // 追加数据
  277. this.list.push(ret)
  278. // 判断是否最后一页
  279. const maxPages = Math.ceil(this.total / this.pageSize)
  280. if(this.pageNo >= maxPages){
  281. this.loadEnd = true
  282. this.loadText = '没有更多了'
  283. }
  284. }else{
  285. this.loadEnd = false
  286. this.loadText = '暂无产品'
  287. }
  288. }
  289. }).catch(err => {
  290. this.loading = false
  291. })
  292. },
  293. // 根据id查找chooseList
  294. getChooseItemById(id){
  295. const a = this.chooseList.findIndex(k => k.find(s=> s.id == id))
  296. const b = a>=0 ? this.chooseList[a].findIndex(s=> s.id == id) : -1
  297. return {p:a,s:b}
  298. },
  299. // 计算总款数、合计、数量
  300. getChooseHeji(){
  301. this.chooseLength = 0
  302. this.totalAmount = 0
  303. this.totalNum = 0
  304. this.chooseList.forEach(key => {
  305. this.chooseLength += key.length // 总款数
  306. key.forEach(item => {
  307. this.totalAmount += item.cost * item.qty // 总金额
  308. this.totalNum += item.qty // 总数量
  309. })
  310. })
  311. },
  312. // 选择产品
  313. chooseProduct(item,index){
  314. const rowItem = this.list[index].find(k => k.id == item.id)
  315. // 新加
  316. if(!rowItem.checked){
  317. rowItem.checked = true
  318. rowItem.qty = 1
  319. // 存入二维数组中
  320. const chooselens = this.chooseList.length
  321. if(chooselens){
  322. const firstRow = this.chooseList[0]
  323. if(firstRow.length<this.choosePageSize){
  324. firstRow.unshift(this.$u.deepClone(rowItem))
  325. }else{
  326. this.chooseList.unshift([this.$u.deepClone(rowItem)])
  327. }
  328. }else{
  329. this.chooseList.unshift([this.$u.deepClone(rowItem)])
  330. }
  331. }else{
  332. rowItem.qty = rowItem.qty + 1
  333. // 已添加,则增加已选列表中的数量
  334. const row = this.getChooseItemById(rowItem.id)
  335. if(row.p>=0 && row.s>=0){
  336. this.chooseList[row.p][row.s].qty = this.chooseList[row.p][row.s].qty + 1
  337. this.chooseList[row.p].splice()
  338. }
  339. }
  340. // 合计
  341. this.getChooseHeji()
  342. },
  343. // 打开已选产品列表
  344. openChoose(){
  345. this.submitOk = false
  346. if(this.chooseLength){
  347. uni.showLoading({
  348. title:'加载中...',
  349. mask: true
  350. })
  351. this.showChoosePopu = true
  352. }else{
  353. this.$u.toast(`请选择产品`);
  354. }
  355. },
  356. // 渲染已选产品列表
  357. openRender(){
  358. this.showSwipeAction = true
  359. setTimeout(()=>{
  360. uni.hideLoading()
  361. },300)
  362. },
  363. // 关闭后
  364. closePopu(){
  365. setTimeout(()=>{
  366. this.showSwipeAction = false
  367. },300)
  368. this.showChoosePopu = false
  369. this.editChoose = false
  370. uni.hideLoading()
  371. // 提交成功
  372. if(this.submitOk){
  373. uni.navigateTo({
  374. url: "/pagesB/procureOrder"
  375. })
  376. }
  377. },
  378. // 确定清空已选列表
  379. claerChoose(){
  380. const _this = this
  381. uni.showModal({
  382. title: '提示',
  383. content: '确定清空已选列表?',
  384. confirmText: '确定',
  385. success(res) {
  386. if(res.confirm){
  387. uni.showLoading({
  388. title: '正在清空...',
  389. mask: true
  390. })
  391. _this.clearChooseData()
  392. }
  393. }
  394. })
  395. },
  396. // 清空已选数据
  397. clearChooseData(){
  398. this.showChoosePopu = false
  399. this.chooseList = []
  400. // 合计
  401. this.getChooseHeji()
  402. // 重置已选状态
  403. this.list.forEach(key => {
  404. key.filter(item => item.checked).forEach(item=>{
  405. item.checked = false
  406. item.qty = 0
  407. })
  408. })
  409. },
  410. // 编辑已选产品
  411. handleEditChoose(){
  412. this.editChoose=!this.editChoose
  413. uni.showLoading({
  414. title: '加载中...',
  415. mask: true
  416. })
  417. this.$nextTick(()=>{
  418. uni.hideLoading()
  419. })
  420. },
  421. // 根据id 获取页面list项
  422. getListItemById(id){
  423. const aindex = this.list.findIndex(key => key.find(a => a.id == id))
  424. const aindex2 = aindex >=0 ? this.list[aindex].findIndex(a => a.id == id) : -1
  425. return {p:aindex,s:aindex2}
  426. },
  427. // 已选产品变更数量
  428. changeQty(val,id){
  429. const crow = this.getChooseItemById(id)
  430. if(crow.p>=0&&crow.s>=0){
  431. this.chooseList[crow.p][crow.s].qty = val
  432. this.chooseList[crow.p].splice()
  433. // 合计
  434. this.getChooseHeji()
  435. }
  436. // 更新页面产品数据
  437. const row = this.getListItemById(id)
  438. if(row.p>=0 && row.s>=0){
  439. this.list[row.p][row.s].qty = val
  440. this.list[row.p].splice()
  441. }
  442. },
  443. //已选产品删除
  444. removeChoose(id){
  445. // 删除项
  446. const crow = this.getChooseItemById(id)
  447. if(crow.p>=0&&crow.s>=0){
  448. this.chooseList[crow.p].splice(crow.s, 1);
  449. // 合计
  450. this.getChooseHeji()
  451. }
  452. // 如果没有数据了
  453. if(this.chooseList.length==0){
  454. this.clearChooseData()
  455. }
  456. // 更新列表已选状态
  457. const row = this.getListItemById(id)
  458. if(row.p>=0 && row.s>=0){
  459. this.list[row.p][row.s].qty = 0
  460. this.list[row.p][row.s].checked = false
  461. this.list[row.p].splice()
  462. }
  463. },
  464. // 去结算
  465. submitOrder(){
  466. if(this.showChoosePopu){
  467. uni.showLoading({
  468. title: '提交中...',
  469. mask: true
  470. })
  471. // 展开成一维数组
  472. const detailList = []
  473. this.chooseList.forEach(key => {
  474. key.forEach(item => {
  475. detailList.push({
  476. promoActiveSn: this.promoActiveSn,
  477. promoRuleSn:item.promoRuleSn,
  478. productSn:item.productSn,
  479. productCode:item.productCode,
  480. qty:item.qty,
  481. price:item.cost,
  482. giveAmount:item.promoRuleValue
  483. })
  484. })
  485. })
  486. purchaseSave({
  487. promoActiveSn: this.promoActiveSn,
  488. detailList: detailList
  489. }).then(res => {
  490. if(res.status == 200){
  491. res.data.detailList = []
  492. this.$store.state.vuex_tempData = res.data
  493. this.clearChooseData()
  494. this.submitOk = true
  495. }else{
  496. uni.showToast({
  497. title: res.message,
  498. icon: 'none'
  499. })
  500. }
  501. })
  502. }else{
  503. this.openChoose()
  504. }
  505. }
  506. }
  507. }
  508. </script>
  509. <style lang="less">
  510. /* 显示一行省略号 */
  511. .ellipsis-one{
  512. white-space: nowrap;
  513. text-overflow: ellipsis;
  514. overflow: hidden;
  515. word-break: break-all;
  516. }
  517. .scrollPage{
  518. height: 100vh;
  519. display: flex;
  520. flex-direction: column;
  521. .loading-bar{
  522. text-align: center;
  523. padding: 10px 0;
  524. color: #999999;
  525. }
  526. .empty-bar{
  527. display: flex;
  528. flex-direction: column;
  529. align-items: center;
  530. justify-content: center;
  531. padding: 20px 0;
  532. image{
  533. width: 100px;
  534. height: 100px;
  535. }
  536. view{
  537. font-size: 14px;
  538. color: #999999;
  539. margin-top: 10px;
  540. }
  541. }
  542. .scrollPage-header{
  543. z-index: 1;
  544. .header-title{
  545. display: flex;
  546. align-items: center;
  547. justify-content: space-between;
  548. padding: 0 10px;
  549. height: 44px;
  550. background-color: #FFFFFF;
  551. box-shadow: 0px 1px 0px 0px #E6E6E6;
  552. .header-title{
  553. font-size: 16px;
  554. color: #333333;
  555. max-width: 70%;
  556. }
  557. .header-left{
  558. display: flex;
  559. align-items: center;
  560. text{
  561. font-size: 14px;
  562. color: #333333;
  563. margin-left: 5px;
  564. }
  565. }
  566. .header-right{
  567. width: 50px;
  568. }
  569. }
  570. }
  571. .scrollPage-body{
  572. flex-grow: 1;
  573. height: 100%;
  574. .search-head{
  575. background: #fff;
  576. }
  577. }
  578. .scrollPage-footer{
  579. background: #fff;
  580. z-index: 200;
  581. > view{
  582. height: 50px;
  583. display: flex;
  584. align-items: center;
  585. justify-content: space-between;
  586. font-size: 32upx;
  587. }
  588. .bottom-bar-left{
  589. padding: 0 30upx;
  590. flex-grow: 1;
  591. display: flex;
  592. align-items: center;
  593. }
  594. .bottom-bar-left-item{
  595. padding-right: 20rpx;
  596. font-size: 24rpx;
  597. display: flex;
  598. align-items: center;
  599. .price-txt{
  600. color: red;
  601. display: flex;
  602. align-items: center;
  603. text{
  604. font-size: 36rpx;
  605. }
  606. }
  607. }
  608. .bottom-bar-left-item-icon{
  609. position: relative;
  610. background: #2196F3;
  611. width: 80rpx;
  612. height: 80rpx;
  613. border-radius: 100%;
  614. display: flex;
  615. align-items: center;
  616. justify-content: center;
  617. .badge{
  618. background: #f44336;
  619. color: #fff;
  620. position: absolute;
  621. left: 50rpx;
  622. top: -3px;
  623. font-size: 12px;
  624. display: flex;
  625. align-items: center;
  626. justify-content: center;
  627. border-radius: 50rpx;
  628. padding: 0 10rpx;
  629. }
  630. }
  631. .bottom-bar-right{
  632. width: 35%;
  633. height: 100%;
  634. background: #066cff;
  635. display: flex;
  636. align-items: center;
  637. justify-content: center;
  638. .bottom-bar-right-item{
  639. color: #fff;
  640. }
  641. }
  642. .bg-0{
  643. background: #066cff;
  644. }
  645. .bg-1{
  646. background: #f44336;
  647. }
  648. }
  649. .choose-title{
  650. display: flex;
  651. align-items:center;
  652. justify-content: space-between;
  653. background: #fff;
  654. width: 100%;
  655. border-bottom: 1px solid #eee;
  656. border-radius: 40rpx 40rpx 0 0;
  657. > view{
  658. padding: 20rpx 30rpx;
  659. }
  660. .choose-left{
  661. display: flex;
  662. align-items:center;
  663. flex-grow: 1;
  664. > view{
  665. display: flex;
  666. align-items:center;
  667. flex-grow: 1;
  668. }
  669. button{
  670. padding: 0 10px;
  671. height: auto;
  672. font-size: 12px;
  673. margin-left: 10px;
  674. }
  675. .editBtn{
  676. color: #2196F3;
  677. justify-content: center;
  678. }
  679. .clearBtn{
  680. color: #ff0000;
  681. justify-content: center;
  682. }
  683. }
  684. .p-nums{
  685. color: #2196F3;
  686. margin: 0 6rpx;
  687. }
  688. }
  689. .popup-body{
  690. height: 100%;
  691. position: relative;
  692. }
  693. .choose-footer{
  694. position: fixed;
  695. bottom: 0;
  696. left: 0;
  697. background: #fff;
  698. z-index: 100;
  699. width: 100%;
  700. > view{
  701. width: 100%;
  702. height: 100rpx;
  703. display: flex;
  704. align-items: center;
  705. justify-content: space-between;
  706. }
  707. .choose-footer-left{
  708. flex-grow: 1;
  709. display: flex;
  710. align-items: center;
  711. padding: 0 30rpx;
  712. > view{
  713. font-size: 28rpx;
  714. }
  715. .choose-footer-left-item{
  716. display: flex;
  717. align-items: center;
  718. margin-right: 10px;
  719. .price-txt{
  720. color: red;
  721. display: flex;
  722. align-items: center;
  723. text{
  724. font-size: 36rpx;
  725. }
  726. }
  727. }
  728. }
  729. .choose-footer-right{
  730. width: 35%;
  731. height: 100%;
  732. background: #2196F3;
  733. display: flex;
  734. align-items: center;
  735. justify-content: center;
  736. .choose-footer-right-item{
  737. color: #fff;
  738. }
  739. }
  740. .bg-1{
  741. background: #f44336;
  742. }
  743. }
  744. }
  745. </style>