index.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970
  1. <template>
  2. <view>
  3. <!-- 头部图片 -->
  4. <view class="banner">
  5. <img :src="indexLogo?indexLogo:'static/img/banner1.jpg'" alt="">
  6. </view>
  7. <!-- 选项列表 -->
  8. <view class="option-list">
  9. <view class="list-item" @click="getScanCode">
  10. <view class="icon iconfont" style="background-color:#59d96e;">
  11. &#xe61a;
  12. </view>
  13. <view class="text">
  14. 扫码充电
  15. </view>
  16. </view>
  17. <view class="list-item" @click="fastRecharge">
  18. <view class="icon iconfont" style="background-color:#4BD2C0;">
  19. &#xe629;
  20. </view>
  21. <view class="text">
  22. 快速充值
  23. </view>
  24. </view>
  25. <view class="list-item" @click="chargingRecord">
  26. <view class="icon iconfont" style="background-color: #6FA5FF;">
  27. &#xe625;
  28. </view>
  29. <view class="text">
  30. 充电记录
  31. </view>
  32. </view>
  33. <view class="list-item" @click="toSearchPile">
  34. <view class="icon iconfont" style="background-color: #9D9FFF;">
  35. &#xe622;
  36. </view>
  37. <view class="text">
  38. 附近站点
  39. </view>
  40. </view>
  41. </view>
  42. <view style="height:50px"></view>
  43. <!-- 站点 -->
  44. <view class="station" v-if="message == 'getLocation:ok' && chargeList.length == 0" @click="gotoUrl('pages/searchPile/stationAndPile/stationDetails?id=' + stationData.id)">
  45. <view class="img-box">
  46. <img src="static/img/Frame 198 (1).png" alt="">
  47. </view>
  48. <view class="text">
  49. <view class="station-title">
  50. <text class="title-left" v-if="stationData.type == '1'">快充</text>
  51. <text class="title-left" v-if="stationData.type == '2'">慢充</text>
  52. <text class="title-left" v-if="stationData.type == '1,2'">快充&慢充</text>
  53. <text class="title-right">{{stationData.name}}</text>
  54. </view>
  55. <view class="station-price">
  56. <view class="price-left">{{stationData.costPrice}}</view>
  57. <view class="price-right">
  58. 起 元/度
  59. </view>
  60. </view>
  61. <view class="park">
  62. <text class="park-p">p</text>
  63. <text class="park-text">2小时免费停车</text>
  64. </view>
  65. <view class="count">
  66. <view class="count-left">空闲{{stationData.availableNum}}/总数{{stationData.totalNum}}</view>
  67. <view class="count-right"><text class="iconfont">&#xe615;</text>{{stationData.distance}}公里</view>
  68. </view>
  69. </view>
  70. </view>
  71. <!-- 定位 -->
  72. <view class="location-box" v-if="message != 'getLocation:ok' && chargeList.length == 0">
  73. <view class="location">
  74. <view class="location-text">
  75. <view class="text-1">
  76. 定位中...
  77. </view>
  78. <view class="text-2">
  79. 授权定位后可查询附近充电站
  80. </view>
  81. <view class="text-3" @click="getPoint()">
  82. 重新定位
  83. </view>
  84. </view>
  85. <view class="img-box">
  86. <img src="static/img/暂无网络信号-缺省页 1.png">
  87. </view>
  88. </view>
  89. </view>
  90. <!-- 充电状态 -->
  91. <view class="state1 state" v-if="chargeList.length > 0" v-for="(item,index) in chargeList" :key="item.id" @click="gotoUrl('pages/searchPile/chargeProcess/dcCharging?id=' + item.id)">
  92. <view class="state-text">
  93. <view class="text-1">
  94. {{item.statusText}}
  95. </view>
  96. <view v-if="item.status == '0'" class="text-2">
  97. 启动中
  98. </view>
  99. <view v-if="item.status == '1'" class="text-2">
  100. 已充{{item.dueFee != null ? item.dueFee : '0.00'}}元
  101. </view>
  102. <!-- <view v-if="item.status == '2'" class="text-2" style="color: red;">
  103. 超出时间将收取占位费
  104. </view> -->
  105. <view v-if="item.status == '4'" class="text-2">
  106. 前方等待{{item.waitNum}}位
  107. </view>
  108. <view class="text-3">
  109. {{item.deviceName}}/<br />{{item.deviceNo}}
  110. </view>
  111. </view>
  112. <view class="img-box">
  113. <img v-if="item.status == '0'" src="static/img/等待中-缺省页.png">
  114. <img v-if="item.status == '1'" src="static/img/充电中-缺省页.png">
  115. <img v-if="item.status == '2'" src="static/img/已充满-缺省页.png">
  116. <img v-if="item.status == '4'" src="static/img/等待中-缺省页.png">
  117. </view>
  118. </view>
  119. <!-- <view class="state2 state">
  120. <view class="state-text">
  121. <view class="text-1" style="color: green">
  122. 充电中
  123. </view>
  124. <view class="text-2">
  125. 前方等待两位
  126. </view>
  127. <view class="text-3">
  128. 荆鹏软件园充电站/1号有序充电桩
  129. </view>
  130. </view>
  131. <view class="img-box">
  132. <img src="static/img/充电中-缺省页.png">
  133. </view>
  134. </view> -->
  135. <!-- <view class="state3 state">
  136. <view class="state-text">
  137. <view class="text-1" style="color: red;">
  138. 已充满
  139. </view>
  140. <view class="text-2" style="color: red;">
  141. 超出时间将收取占位费
  142. </view>
  143. <view class="text-3">
  144. 荆鹏软件园充电站/1号有序充电桩
  145. </view>
  146. </view>
  147. <view class="img-box">
  148. <img src="static/img/已充满-缺省页.png">
  149. </view>
  150. </view> -->
  151. <!-- 充值活动 -->
  152. <view class=" top-up" v-if="activityList.length > 0">
  153. <view class="top-up-title"><text class="line"></text>充值活动</view>
  154. <view class="img-box">
  155. <view class="img-1" v-for="(item,index) in activityList" :key="item.id" @click="rechargeActivity">
  156. <img :src="item.picUrl" alt="">
  157. </view>
  158. </view>
  159. </view>
  160. <!-- 新闻 -->
  161. <view class="news-title" v-if="newsList.length > 0">
  162. <view class="news-title-left">
  163. <view class="line" style="margin-top:4px;"></view>新闻公告
  164. </view>
  165. <view class="more" @click="toNewsNotice">更多<view class="more-icon iconfont"> &#xe600;</view>
  166. </view>
  167. </view>
  168. <view class="news">
  169. <view class="news-content" v-for="(item,index) in newsList" :key="item.id" @click="gotoUrl('pages/article/articleDetails?id=' + item.id)">
  170. <view class="content-text">
  171. {{item.title}}
  172. <view class="news-time">{{item.createTime?item.createTime.slice(5):''}}</view>
  173. </view>
  174. <view class="content-img">
  175. <img :src="item.pic" alt="">
  176. </view>
  177. </view>
  178. </view>
  179. <view class="bottom" v-if="newsList.length == recordsTotal && newsList.length != 0">
  180. <view class="bot">
  181. <view class="bot-line"></view>
  182. <view class="bot-text">已经到底了</view>
  183. <view class="bot-line"></view>
  184. </view>
  185. </view>
  186. <!-- 导航栏 -->
  187. <view class="navigation">
  188. <view class="login-prompt" v-if="!userId">
  189. 登录显示更多会员服务
  190. <text class="button" @click="toLogin">登录/注册</text>
  191. </view>
  192. </view>
  193. <Tabbar :current="0"></Tabbar>
  194. </view>
  195. </template>
  196. <script>
  197. import * as API from '@/apis/index.js'
  198. import * as newsApi from '@/apis/news.js'
  199. import * as WxJsApi from '@/utils/wxJsApi.js'
  200. import * as siteApi from '@/apis/site.js';
  201. import MapLoader from '@/utils/AMap'
  202. import Tabbar from '@/components/Tabbar.vue'
  203. export default {
  204. components: {
  205. Tabbar
  206. },
  207. data() {
  208. return {
  209. timeOut: false,
  210. stationData: {},
  211. chargeList: [],
  212. activityList: [],
  213. userId: '',
  214. newsList: [],
  215. pageIndex: 1,
  216. recordsTotal: 0,
  217. longitude: '',
  218. latitude: '',
  219. message: '',
  220. indexLogo:''
  221. }
  222. },
  223. onLoad(op) {
  224. var indexLogo=this.carhelp.getConfig().indexLogo
  225. // img="https://yktwechat.xiaoxinda.com/config/xxd2021.jpg"
  226. if(indexLogo){
  227. this.indexLogo=indexLogo;
  228. }
  229. if(op.jpcode){
  230. var k=API.codeOperation(op.jpcode);
  231. if(k){
  232. uni.navigateTo({
  233. url:k
  234. })
  235. }
  236. }
  237. },
  238. onUnload() {
  239. this.timeOut = false;
  240. },
  241. onReachBottom() {
  242. if (this.newsList.length < this.recordsTotal) {
  243. this.myLoadmore();
  244. }
  245. },
  246. onReady() {
  247. if (this.carhelp.getPersonInfo()) {
  248. this.userId = this.carhelp.getPersonInfo().id;
  249. this.getFindChargeData();
  250. }
  251. WxJsApi.getWxConfig(['getLocation', 'addEventListener', 'scanQRCode']).then((res) => {
  252. // console.log(res)
  253. }).catch(error => {
  254. console.log(res)
  255. })
  256. this.getPoint();
  257. this.getNewsList();
  258. this.getActivityInfoList();
  259. },
  260. methods: {
  261. getFindChargeData() {
  262. uni.showLoading({
  263. title: "加载中",
  264. mask: true,
  265. })
  266. API.findChargeData().then((res) => {
  267. uni.hideLoading();
  268. this.chargeList = res.data.chargingRecordList;
  269. var list = res.data.chargingRecordList;
  270. for(var i=0;i<list.length;i++) {
  271. if(list[i].status == '1' || list[i].status == '4') {
  272. this.timeOut = true;
  273. }
  274. }
  275. if(this.timeOut){
  276. setTimeout(()=>{
  277. this.getFindChargeData();
  278. },5000)
  279. }
  280. }).catch(error => {
  281. uni.showToast({
  282. title: error,
  283. icon: "none"
  284. })
  285. })
  286. },
  287. toSearchPile() {
  288. uni.navigateTo({
  289. url: '/pages/searchPile/searchPile'
  290. })
  291. },
  292. toLogin() {
  293. uni.navigateTo({
  294. url: '/pages/login/login'
  295. })
  296. },
  297. toNewsNotice() {
  298. uni.navigateTo({
  299. url: '/pages/article/newsNotice'
  300. })
  301. },
  302. //微信扫二维码
  303. getScanCode() {
  304. if (this.userId) {
  305. WxJsApi.scanQRCode(1).then(res => {
  306. if(res) {
  307. API.scanCode(res).then((response) => {
  308. }).catch(error => {
  309. uni.showToast({
  310. title: error,
  311. icon: "none"
  312. })
  313. })
  314. }
  315. }).catch(error => {
  316. })
  317. } else {
  318. uni.navigateTo({
  319. url: '/pages/login/login'
  320. })
  321. }
  322. },
  323. fastRecharge() {
  324. if (this.userId) {
  325. uni.navigateTo({
  326. url: '/pages/user/finance/recharge'
  327. })
  328. } else {
  329. uni.navigateTo({
  330. url: '/pages/login/login'
  331. })
  332. }
  333. },
  334. chargingRecord() {
  335. if (this.userId) {
  336. uni.navigateTo({
  337. url: '/pages/record/index'
  338. })
  339. } else {
  340. uni.navigateTo({
  341. url: '/pages/login/login'
  342. })
  343. }
  344. },
  345. rechargeActivity() {
  346. if (this.userId) {
  347. uni.navigateTo({
  348. url: '/pages/user/finance/recharge'
  349. })
  350. } else {
  351. uni.navigateTo({
  352. url: '/pages/login/login'
  353. })
  354. }
  355. },
  356. getActivityInfoList() {
  357. uni.showLoading({
  358. title: "加载中",
  359. mask: true,
  360. })
  361. API.activityInfoList({
  362. pageIndex: 1,
  363. pageSize: 10
  364. }).then((res) => {
  365. uni.hideLoading()
  366. this.activityList = res.data.data;
  367. }).catch(error => {
  368. uni.showToast({
  369. title: error,
  370. icon: "none"
  371. })
  372. })
  373. },
  374. getPoint() {
  375. WxJsApi.getLocation().then((res) => {
  376. this.latitude = parseFloat(res.latitude);
  377. this.longitude = parseFloat(res.longitude);
  378. this.message = res.errMsg;
  379. if (res.errMsg != 'getLocation:ok') {
  380. uni.showToast({
  381. title: res
  382. })
  383. } else {
  384. siteApi.searchStationData({
  385. longitude: this.longitude,
  386. latitude: this.latitude
  387. }).then((response) => {
  388. this.stationData = response.data.data[0];
  389. }).catch(error => {
  390. uni.showToast({
  391. title: error,
  392. icon: "none"
  393. })
  394. })
  395. }
  396. }).catch(error => {
  397. uni.showToast({
  398. title: error,
  399. icon: "none"
  400. })
  401. })
  402. },
  403. getNewsList(bl) {
  404. uni.showLoading({
  405. title: "加载中",
  406. mask: true,
  407. })
  408. if (bl) {
  409. this.newsList = [];
  410. this.pageIndex = 1;
  411. }
  412. newsApi.newsInfoList({
  413. pageIndex: 1,
  414. pageSize: 10
  415. }).then((res) => {
  416. uni.hideLoading()
  417. this.newsList = [
  418. ...this.newsList,
  419. ...res.data.data
  420. ];
  421. this.recordsTotal = res.data.recordsTotal
  422. }).catch(error => {
  423. uni.showToast({
  424. title: error,
  425. icon: "none"
  426. })
  427. })
  428. },
  429. myLoadmore() {
  430. this.pageIndex += 1;
  431. this.getNewsList()
  432. },
  433. }
  434. }
  435. </script>
  436. <style lang="scss" scoped>
  437. // 头部图片
  438. img {
  439. width: 100%;
  440. height: 100%;
  441. }
  442. .banner {
  443. width: 100%;
  444. height: 300px;
  445. }
  446. // 选项列表
  447. .option-list {
  448. width: 91.4%;
  449. padding-top: 18px;
  450. height: 100px;
  451. line-height: 20px;
  452. border-radius: 8px;
  453. text-align: center;
  454. background-color: #fff;
  455. position: absolute;
  456. top: 260px;
  457. left: 0;
  458. right: 0;
  459. margin: auto;
  460. display: flex;
  461. justify-content: space-around;
  462. .list-item {
  463. // 图标
  464. .icon {
  465. width: 40px;
  466. height: 40px;
  467. border-radius: 99px;
  468. line-height: 40px;
  469. font-size: 24px;
  470. text-align: center;
  471. margin: auto;
  472. color: #ffffff;
  473. }
  474. }
  475. }
  476. // 站点
  477. .station {
  478. width:91.4%;
  479. height: 120px;
  480. margin: 20px auto 0 ;
  481. position: relative;
  482. .img-box {
  483. width: 100%;
  484. height: 100%;
  485. border-radius: 8px;
  486. overflow: hidden;
  487. }
  488. img {
  489. width: 100%;
  490. height: 100%;
  491. }
  492. .text {
  493. position: absolute;
  494. top: 0;
  495. left: 20px;
  496. // 头部
  497. .station-title {
  498. display: flex;
  499. margin-top: 12px;
  500. .title-left {
  501. display: inline-block;
  502. height: 20px;
  503. width: 44px;
  504. // margin-left: 12px;
  505. line-height: 20px;
  506. border-radius: 50px;
  507. background-color: rgba(133, 140, 255, 100);
  508. color: rgba(255, 255, 255, 100);
  509. font-size: 12px;
  510. text-align: center;
  511. font-family: Arial;
  512. }
  513. .title-right {
  514. display: inline-block;
  515. margin-left: 4px;
  516. margin-top: 2px;
  517. width: 271px;
  518. height: 16px;
  519. line-height: 16px;
  520. color: rgba(16, 16, 16, 100);
  521. font-size: 16px;
  522. text-align: left;
  523. font-family: AlibabaPuHui-regular;
  524. }
  525. }
  526. // 价格
  527. .station-price {
  528. margin-top: 4px;
  529. display: flex;
  530. .price-left {
  531. width: 40px;
  532. height: 20px;
  533. color: rgba(255, 98, 0, 100);
  534. font-size: 20px;
  535. text-align: left;
  536. font-family: Roboto-medium;
  537. }
  538. .price-right {
  539. height: 20px;
  540. line-height: 20px;
  541. margin-left: 2px;
  542. margin-top: 3px;
  543. color: rgba(102, 102, 102, 100);
  544. font-size: 14px;
  545. text-align: left;
  546. font-family: AlibabaPuHui-regular;
  547. }
  548. }
  549. // park
  550. .park {
  551. margin-top: 4px;
  552. display: flex;
  553. .park-p {
  554. display: inline-block;
  555. width: 20px;
  556. height: 18px;
  557. line-height: 12px;
  558. text-align: center;
  559. background-color: rgba(125, 177, 255, 100);
  560. color: #fff;
  561. }
  562. .park-text {
  563. display: inline-block;
  564. width: 300px;
  565. height: 17px;
  566. color: rgba(102, 102, 102, 100);
  567. font-size: 12px;
  568. text-align: left;
  569. margin-left: 2px;
  570. margin-top: 2px;
  571. }
  572. }
  573. // 数量
  574. .count {
  575. margin-top: 14px !important;
  576. width: 100%;
  577. display: flex;
  578. justify-content: space-between;
  579. padding: 0 5px;
  580. }
  581. }
  582. }
  583. //定位
  584. .location {
  585. width: 91.4%;
  586. background-color: #ffffff;
  587. height: 120px;
  588. display: flex;
  589. margin: 20px auto 0;
  590. border-radius: 8px;
  591. border: #F2F4F4 1px;
  592. .location-text {
  593. padding: 24px 28px;
  594. .text-1 {
  595. height: 16px;
  596. line-height: 16px;
  597. color: rgba(16, 16, 16, 100);
  598. font-size: 16px;
  599. text-align: left;
  600. }
  601. .text-2 {
  602. height: 17px;
  603. line-height: 17px;
  604. color: rgba(102, 102, 102, 100);
  605. font-size: 12px;
  606. text-align: left;
  607. margin-top: 4px;
  608. }
  609. .text-3 {
  610. width: 80px;
  611. height: 24px;
  612. border-radius: 50px;
  613. color: rgba(0, 185, 98, 100);
  614. font-size: 12px;
  615. text-align: center;
  616. font-family: Microsoft Yahei;
  617. border: 1px solid rgba(0, 185, 98, 100);
  618. margin-top: 11px;
  619. }
  620. }
  621. .img-box {
  622. width: 120px;
  623. height: 120px;
  624. float: right;
  625. }
  626. }
  627. .state{
  628. width: 91.4%;
  629. background-color: #ffffff;
  630. height: 120px;
  631. display: flex;
  632. margin: 20px auto 0;
  633. border-radius: 8px;
  634. border: #F2F4F4 1px;
  635. .state-text{
  636. width: 61.8%;
  637. padding: 24px 0 0 28px;
  638. .text-1 {
  639. height: 16px;
  640. line-height: 16px;
  641. color: blueviolet;
  642. font-size: 16px;
  643. text-align: left;
  644. }
  645. .text-2 {
  646. height: 17px;
  647. line-height: 17px;
  648. color: #101010;
  649. text-align: left;
  650. margin-top: 12px;
  651. }
  652. .text-3 {
  653. font-size: 12px;
  654. line-height: 20px;
  655. margin-top: 6px;
  656. color: #999999;
  657. }
  658. }
  659. .img-box {
  660. width: 120px;
  661. height: 120px;
  662. float: right;
  663. }
  664. }
  665. //充值
  666. .top-up {
  667. margin-left: 16px;
  668. margin-top: 17px;
  669. .top-up-title {
  670. color: rgba(16, 16, 16, 100);
  671. font-size: 16px;
  672. }
  673. .img-box {
  674. margin-top: 12px;
  675. width: 345px;
  676. height: 146px;
  677. display: flex;
  678. justify-content: space-between;
  679. .img-1 {
  680. width: 166px;
  681. height: 146px;
  682. position: relative;
  683. .img-text {
  684. position: absolute;
  685. top: 12px;
  686. left: 12px;
  687. height: 33px;
  688. color: #ff4444;
  689. font-size: 24px;
  690. text-align: left;
  691. margin-left: 12px;
  692. .img-text2 {
  693. font-size: 14px
  694. }
  695. }
  696. }
  697. img {
  698. width: 100%;
  699. height: 100%;
  700. }
  701. }
  702. }
  703. // 小竖线
  704. .line {
  705. display: inline-block;
  706. width: 3px;
  707. height: 12px;
  708. margin-right: 7px;
  709. background-color: rgba(0, 145, 67, 100);
  710. }
  711. // 新闻公告
  712. .news-title {
  713. padding: 0 16px;
  714. margin-top: 12px;
  715. color: rgba(16, 16, 16, 100);
  716. font-size: 16px;
  717. display: flex;
  718. justify-content: space-between;
  719. background-color: #F2F4F4;
  720. .news-title-left {
  721. display: flex;
  722. }
  723. .more {
  724. font-size: 14px;
  725. color: #777777;
  726. display: flex;
  727. line-height: 20px;
  728. .more-icon {
  729. font-size: 24px
  730. }
  731. }
  732. }
  733. .news {
  734. background-color: #fff;
  735. width: 91.4%;
  736. margin: 12px auto 0;
  737. border-radius: 8px;
  738. .news-content {
  739. display: flex;
  740. justify-content: space-between;
  741. padding: 12px;
  742. .content-text {
  743. width: 56.2%;
  744. height: 42px;
  745. line-height: 21px;
  746. color: #101010;
  747. text-align: left;
  748. font-size: 14px
  749. }
  750. ;
  751. .content-img {
  752. width: 26.7%;
  753. height: 80px;
  754. background-color: #777777;
  755. border-radius: 4px;
  756. overflow: hidden;
  757. img {
  758. width: 100%;
  759. height: 100%;
  760. }
  761. }
  762. .news-time {
  763. margin-top: 12px;
  764. color: #999999;
  765. width: 80px;
  766. height: 20px;
  767. font-size: 14px;
  768. }
  769. }
  770. }
  771. .bottom {
  772. width: 100%;
  773. height: 100px;
  774. .bot {
  775. width: 100%;
  776. padding-left: 66px;
  777. display: flex;
  778. .bot-line {
  779. margin-top: 20px;
  780. width: 80px;
  781. height: 0px;
  782. border: 1px solid rgba(207, 210, 213, 100);
  783. }
  784. .bot-text {
  785. width: 60px;
  786. height: 17px;
  787. margin-top: 13px;
  788. margin-left: 12px;
  789. margin-right: 12px;
  790. font-size: 12px;
  791. text-align: center;
  792. color: rgba(182, 189, 195, 100);
  793. }
  794. }
  795. }
  796. // 导航栏
  797. .navigation {
  798. width: 100%;
  799. // height: 40px;
  800. padding: 10px 0;
  801. background-color: #fff;
  802. position: fixed;
  803. bottom: 0;
  804. left: 0;
  805. display: flex;
  806. justify-content: space-around;
  807. text-align: center;
  808. color: #999999;
  809. .nav-icon {
  810. width: 54px;
  811. font-size: 24px
  812. }
  813. .nav-text {
  814. font-size: 14px;
  815. }
  816. }
  817. // 登录提示
  818. .login-prompt {
  819. width: 91.4%;
  820. height: 40px;
  821. line-height: 40px;
  822. border-radius: 50px;
  823. text-align: left;
  824. padding-left: 16px;
  825. padding-right: 4px;
  826. background-color: rgba(0, 0, 0, 0.6);
  827. position: fixed;
  828. bottom: 75px;
  829. color: #ffffff;
  830. .button {
  831. width: 88px;
  832. height: 32px;
  833. line-height: 32px;
  834. border-radius: 50px;
  835. background-color: rgba(0, 185, 98, 100);
  836. text-align: center;
  837. float: right;
  838. margin-top: 4px;
  839. }
  840. }
  841. </style>