promoProduct.vue 18 KB

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