user.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092
  1. <template>
  2. <view class="container">
  3. <view style="position: absolute;padding-left: 80%; display: flex;">
  4. <image @click='smBtnClick' style='width:21px;height:21px;' src="../../static/img/saoma.png"></image>
  5. <image @click='setting' style='width:21px;height:21px;margin-left: 20rpx;'
  6. src="../../static/img/sign/shezhi@3x.png"></image>
  7. </view>
  8. <view class="indexUp flex justify-between">
  9. <view class='flex'>
  10. <image v-bind:src="headUrl" class="headPortrait"></image>
  11. <view class="personal">
  12. <view @click="toLogin" class="information">{{hasLogin? username : '立即登录' }}</view>
  13. <view class="information">{{starUserphone}}</view>
  14. </view>
  15. </view>
  16. </view>
  17. <view style='background:transparent;margin-bottom:0;padding:0;' class="cu-list grid"
  18. :class="['col-' + gridCol,gridBorder?'':'no-border']">
  19. <view class="cu-item" v-for="(item,index) in gridList" :key="index" @click="gridClick(item, index)"
  20. v-if="index<gridCol*2">
  21. <view :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
  22. <image :src="item.src" class="sign"></image>
  23. <text>{{item.name}}</text>
  24. </view>
  25. </view>
  26. </view>
  27. <view class="cover-container">
  28. <view class='cover-container-item'>
  29. <view style='font-size:16px;padding-left:14px;'>我的功能</view>
  30. <view class="cu-list grid" :class="['col-' + gridCol,gridBorder?'':'no-border']">
  31. <view class="cu-item" style='text-align:center;' v-for="(item,index) in gridList1" :key="index"
  32. @click="gridClick(item, index)" v-if="index<gridCol*2">
  33. <view :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
  34. <text v-if='item.num==4&&taskTip' class='badge_user'>{{taskTip}}</text>
  35. <image :src="item.src" class="sign1"></image>
  36. </view>
  37. <text>{{item.name}}</text>
  38. </view>
  39. </view>
  40. </view>
  41. </view>
  42. <!-- <view style="margin-top: 10rpx;">
  43. <web-view src="https://datav.aliyuncs.com/share/01de6913a5761ab4d3171b1f0b3e0704"></web-view>
  44. </view> -->
  45. <!-- <view style='text-align:center;'>
  46. <navigator
  47. url="/pages/sale/webview?can_share=false&url=https://liangxin.zthymaoyi.com/userAgreement.html"
  48. class="path" hover-class="navigator-hover">《服务协议》</navigator>
  49. <navigator
  50. url="/pages/sale/webview?can_share=false&url=https://liangxin.zthymaoyi.com/screctAgreement.html"
  51. class="path" hover-class="navigator-hover">《隐私政策》</navigator>
  52. </view> -->
  53. <!-- <view class="guess-section-wrap">
  54. <view class='flex justify-between'>
  55. <view class='title Medium'>工厂价格</view>
  56. </view>
  57. <view class=' guess-section-wrap-item clearfix' v-for='(item,index1) in plantList' :key="index1">
  58. <view class='factory'>{{item.factory}}</view>
  59. <view class='wrap'>{{item.city}} {{item.factoryType}}</view>
  60. <view class='price'>
  61. <text class='currectprice '>{{item.price}}</text>
  62. 较昨日
  63. <image v-if='item.comparePrice>0' style="width:7.5px;height:9px;"
  64. src='../../static/img/homepage/shangsheng.png'></image>
  65. <image v-if='item.comparePrice<0' style="width:7.5px;height:9px;"
  66. src='../../static/img/homepage/xiajiang.png'></image>
  67. <text v-if='item.comparePrice>0' class='yesterday up'>{{item.comparePrice}}</text>
  68. <text v-if='item.comparePrice<0' class='yesterday down'>{{-item.comparePrice}}</text>
  69. <text v-if='item.comparePrice==0' class='yesterday'>-</text>
  70. </view>
  71. </view>
  72. </view>
  73. <u-back-top :scroll-top="scrollTop" mode="circle" icon="arrow-upward"></u-back-top> -->
  74. </view>
  75. </template>
  76. <script>
  77. import dragButton from "@/components/drag-button/drag-button.vue";
  78. import {
  79. mapState
  80. } from 'vuex';
  81. let startY = 0,
  82. moveY = 0,
  83. pageAtTop = true;
  84. export default {
  85. components: {
  86. dragButton
  87. },
  88. data() {
  89. return {
  90. scrollTop: 0,
  91. inputShow: false,
  92. modalName: '',
  93. mycarStyle: '',
  94. feild: undefined,
  95. inputContent: '',
  96. coverTransform: 'translateY(0px)',
  97. coverTransition: '0s',
  98. moving: false,
  99. footprintList: [],
  100. isVip: false,
  101. userInfoTmp: [],
  102. inputStatus: 'none',
  103. carInfo: [],
  104. plantList: [],
  105. headUrl: "../../static/img/myimg/YongHu@3x.png",
  106. userphone: "",
  107. gridCol: 4,
  108. gridBorder: false,
  109. username: "请更改昵称",
  110. gridList: [{
  111. num: 0,
  112. name: '认证',
  113. // icon: 'cuIcon-apps',
  114. src: '../../static/img/myimg/renzheng@3x.png',
  115. tips: 0,
  116. url: '/pages/attestation/index',
  117. show: true
  118. },
  119. {
  120. num: 1,
  121. name: '粮脉',
  122. // icon: 'cuIcon-apps',
  123. src: '../../static/img/myimg/liangmai@3x.png',
  124. tips: 0,
  125. url: '/pages/grain_pulse/my_grain_pulse',
  126. show: true
  127. },
  128. {
  129. num: 2,
  130. name: '发布',
  131. // icon: 'cuIcon-news',
  132. src: '../../static/img/myimg/fabu@3x.png',
  133. tips: 0,
  134. url: `/pages/release/release`,
  135. show: true
  136. },
  137. {
  138. num: 3,
  139. name: '货运收发',
  140. // icon: 'cuIcon-copy',
  141. src: '../../static/img/sign/receiveGoods@2x.png',
  142. tips: 0,
  143. url: `/pageA/freightTransport/index`,
  144. show: true
  145. },
  146. ],
  147. gridList1: [{
  148. num: 0,
  149. name: 'ERP业务',
  150. // icon: 'cuIcon-copy',
  151. src: '../../static/img/myimg/erp.png',
  152. tips: 0,
  153. url: `/pages/erp/index`,
  154. show: true
  155. },
  156. {
  157. num: 1,
  158. name: '收购业务',
  159. // icon: 'cuIcon-copy',
  160. src: '../../static/img/myimg/sg.png',
  161. tips: 0,
  162. url: `/pages/erpbusiness/index`,
  163. show: true
  164. },
  165. {
  166. num: 2,
  167. name: '我的票据',
  168. // icon: 'cuIcon-news',
  169. src: '../../static/img/sign/piaoju@3x.png',
  170. tips: 0,
  171. url: `/pages/bill/index`,
  172. show: true
  173. },
  174. {
  175. num: 3,
  176. name: '我的合同',
  177. // icon: 'cuIcon-calendar',
  178. src: '../../static/img/sign/myContract@2x.png',
  179. tips: 0,
  180. url: '/pageB/contract/contract',
  181. show: true
  182. },
  183. {
  184. num: 4,
  185. name: '我的任务',
  186. // icon: 'cuIcon-copy',
  187. src: '../../static/img/sign/myTask@2x.png',
  188. tips: 0,
  189. url: '/pages/task/my_task',
  190. show: true
  191. },
  192. {
  193. num: 5,
  194. name: '联系客服',
  195. // icon: 'cuIcon-edit',
  196. src: '../../static/img/sign/service.png',
  197. tips: 0,
  198. url: `/pages/erp/contactCustomerService/contactCustomerService`,
  199. show: true
  200. },
  201. {
  202. num: 6,
  203. name: '数据报表',
  204. // icon: 'cuIcon-edit',
  205. src: '../../static/img/sign/myContract@2x.png',
  206. tips: 0,
  207. url: `/pages/user/report`,
  208. show: true
  209. }
  210. ],
  211. showTran: true,
  212. companyId: 1,
  213. current: 4
  214. }
  215. },
  216. // #ifndef MP
  217. onNavigationBarButtonTap(e) {
  218. const index = e.index;
  219. if (index === 0) {
  220. this.navTo('/pages/set/set');
  221. } else if (index === 1) {
  222. // #ifdef APP-PLUS
  223. const pages = getCurrentPages();
  224. const page = pages[pages.length - 1];
  225. const currentWebview = page.$getAppWebview();
  226. currentWebview.hideTitleNViewButtonRedDot({
  227. index
  228. });
  229. // #endif
  230. uni.navigateTo({
  231. url: '/pages/notice/notice'
  232. })
  233. }
  234. },
  235. // #endif
  236. computed: {
  237. ...mapState(['hasLogin', 'userInfo']),
  238. // 手机号中间4位加*
  239. starUserphone() {
  240. let reg = /^(\d{3})\d{4}(\d{4})$/;
  241. if (this.userphone) {
  242. return this.userphone.replace(reg, "$1****$2");
  243. }
  244. }
  245. },
  246. onPageScroll(e) {
  247. this.scrollTop = e.scrollTop;
  248. },
  249. onShow() {
  250. uni.hideKeyboard()
  251. uni.showTabBar()
  252. this.loadData()
  253. console.log("hasLogin", this.hasLogin)
  254. if (this.userInfo) {
  255. if (!this.userInfo.avatarUrl) {
  256. this.headUrl = "../../static/img/myimg/YongHu@3x.png"
  257. } else {
  258. this.headUrl = this.userInfo.avatarUrl
  259. }
  260. this.username = this.userInfo.userName
  261. this.userphone = this.userInfo.phone
  262. var that = this
  263. this.$api.doRequest('get', '/notice/query/noticeNumber').then(res => {
  264. console.log("noticeNumber", res)
  265. if (res.data.data) {
  266. let name = 'myTip';
  267. let value = res.data.data.task;
  268. that.$store.commit('$uStore', {
  269. name,
  270. value
  271. });
  272. if (value != 0 && value) {
  273. uni.setTabBarBadge({
  274. index: 4,
  275. text: value + ""
  276. })
  277. }
  278. name = 'taskTip';
  279. value = res.data.data.task;
  280. that.$store.commit('$uStore', {
  281. name,
  282. value
  283. });
  284. // name = 'contractTip';
  285. // value = res.data.data.contractTip;
  286. // that.$store.commit('$uStore', {
  287. // name,
  288. // value
  289. // });
  290. }
  291. })
  292. } else {
  293. this.headUrl = "../../static/img/myimg/YongHu@3x.png"
  294. this.username = "立即登录"
  295. }
  296. console.log("this.userInfo", this.userInfo)
  297. },
  298. methods: {
  299. smBtnClick() {
  300. console.log(2)
  301. if (!this.hasLogin) {
  302. uni.showModal({
  303. title: '登录提示',
  304. content: '您尚未登录,是否立即登录?',
  305. showCancel: true,
  306. confirmText: '登录',
  307. success: (e) => {
  308. if (e.confirm) {
  309. uni.navigateTo({
  310. url: '/pages/public/login'
  311. })
  312. }
  313. },
  314. fail: () => {},
  315. complete: () => {}
  316. })
  317. } else {
  318. uni.scanCode({
  319. success: function(res) {
  320. console.log('条码内容:' + res.result);
  321. uni.navigateTo({
  322. url: "/pages/erpbusiness/sm/sm?data=" + res.result
  323. })
  324. }
  325. });
  326. }
  327. },
  328. fankui() {
  329. uni.navigateTo({
  330. url: `/pages/user/fankui`
  331. })
  332. },
  333. zhibo() {
  334. uni.navigateTo({
  335. url: `/pageB/video/broadcast`
  336. })
  337. },
  338. look() {
  339. uni.navigateTo({
  340. url: `/pageB/video/look`
  341. })
  342. },
  343. contactUs() {
  344. const that = this
  345. uni.makePhoneCall({
  346. // 手机号
  347. phoneNumber: '18241771147',
  348. // 成功回调
  349. success: (res) => {},
  350. // 失败回调
  351. fail: (res) => {}
  352. });
  353. },
  354. loadData() {
  355. // 工厂价格
  356. let that = this
  357. that.$api.request('news', 'getFactoryPriceInfo', {
  358. category: this.category,
  359. page: 1,
  360. limit: 99999
  361. }, failres => {
  362. that.$api.msg(failres.errmsg)
  363. this.isLoadMore = false
  364. this.loadStatus = 'nomore'
  365. if (this.pages > 1) {
  366. this.pages = 1
  367. }
  368. uni.hideLoading()
  369. }).then(res => {
  370. let data = res.data
  371. that.plantList = data
  372. // that.makeScrollData(that.plantList, 8)
  373. uni.hideLoading()
  374. })
  375. // const that = this
  376. // if(uni.getStorageSync("PageCur")){
  377. // that.PageCur = uni.getStorageSync("PageCur");
  378. // }
  379. // that.userInfoTmp = uni.getStorageSync("userInfo")
  380. // uni.showLoading({
  381. // title: '正在加载',
  382. // mask:true
  383. // })
  384. // that.$api.request('integral', 'getIndexData', failres => {
  385. // that.$api.msg(failres.errmsg)
  386. // uni.hideLoading()
  387. // }).then(res => {
  388. // let data = res.data
  389. // uni.setStorageSync("message", data.message);
  390. // uni.setStorageSync("task", data.task);
  391. // uni.setStorageSync("contract", data.contract);
  392. // uni.setStorageSync('showTran', data.showTran);
  393. // that.showTran = data.showTran
  394. // that.gridList[4].tips = data.task
  395. // that.gridList[2].tips = data.contract
  396. // that.companyId = data.companyId
  397. // uni.hideLoading()
  398. // })
  399. },
  400. gridClick(item, index) {
  401. var that = this
  402. if (item.name == "退出登录") {
  403. this.logout()
  404. return;
  405. } else if (item.name == "联系我们") {
  406. //#ifdef MP
  407. this.inputShow = true
  408. this.inputStatus = 'inline'
  409. this.feild = "nickname"
  410. this.inputContent = ''
  411. //#endif
  412. //#ifdef APP-PLUS
  413. this.contactUs()
  414. //#endif
  415. return;
  416. } else if (item.name == '我的车辆') {
  417. const that = this
  418. uni.showLoading({
  419. title: '正在加载',
  420. mask: true
  421. })
  422. that.$api.request('tran', 'getMyCarList', failres => {
  423. that.$api.msg(failres.errmsg)
  424. uni.hideLoading()
  425. }).then(res => {
  426. that.carInfo = res.data
  427. if (that.carInfo.length == 0) {
  428. that.$api.msg('暂无车辆信息')
  429. } else {
  430. var height = that.carInfo.length * 100
  431. var width = 500
  432. that.mycarStyle = "height:" + height + "rpx;width:" + width + "rpx"
  433. that.modalName = 'MycarModal'
  434. }
  435. uni.hideLoading()
  436. })
  437. return;
  438. }
  439. if (!this.hasLogin) {
  440. uni.showModal({
  441. title: '登录提示',
  442. content: '您尚未登录,是否立即登录?',
  443. showCancel: true,
  444. confirmText: '登录',
  445. success: (e) => {
  446. if (e.confirm) {
  447. uni.navigateTo({
  448. url: '/pages/public/login'
  449. })
  450. }
  451. },
  452. fail: () => {},
  453. complete: () => {}
  454. })
  455. } else {
  456. if (item.url) {
  457. uni.navigateTo({
  458. url: item.url + `?companyId=${that.companyId}`
  459. })
  460. }
  461. }
  462. },
  463. setting() {
  464. if (!this.hasLogin) {
  465. uni.showModal({
  466. title: '登录提示',
  467. content: '您尚未登录,是否立即登录?',
  468. showCancel: true,
  469. confirmText: '登录',
  470. success: (e) => {
  471. if (e.confirm) {
  472. uni.navigateTo({
  473. url: '/pages/public/login'
  474. })
  475. }
  476. },
  477. fail: () => {},
  478. complete: () => {}
  479. })
  480. } else {
  481. uni.navigateTo({
  482. url: '/pages/user/setUp'
  483. })
  484. }
  485. },
  486. toLogin() {
  487. console.log("userInfo", this.userInfo)
  488. if (!this.hasLogin || !this.userInfo || this.username == "立即登录") {
  489. uni.navigateTo({
  490. url: '/pages/public/login_account_number'
  491. })
  492. } else {
  493. uni.navigateTo({
  494. url: '/pages/user/setUp'
  495. })
  496. }
  497. // else if(!this.userInfo.nickname){
  498. // this.inputShow = true
  499. // this.inputStatus = 'inline'
  500. // this.feild = "nickname"
  501. // this.inputContent = ''
  502. // }
  503. },
  504. confirm() {
  505. const that = this
  506. if (!that.inputContent) {
  507. that.$api.msg('输入不能为空')
  508. return
  509. }
  510. let obj = {}
  511. obj[that.feild] = that.inputContent
  512. that.$api.request('user', 'syncUserInfo', obj).then(res => {
  513. that.userInfo.nickname = that.inputContent
  514. that.inputContent = ''
  515. that.$store.commit('login', that.userInfo)
  516. })
  517. },
  518. cancel() {
  519. this.inputShow = false
  520. this.inputStatus = 'none'
  521. this.genderShow = false
  522. },
  523. myAccount() {
  524. uni.navigateTo({
  525. url: `/pageA/pages/contract`
  526. })
  527. },
  528. logout() {
  529. const that = this
  530. uni.showModal({
  531. title: '询问',
  532. content: '您确定要退出吗?',
  533. cancelText: '取消',
  534. confirmText: '确定',
  535. success: (e) => {
  536. if (e.confirm) {
  537. uni.hideTabBarRedDot({
  538. index: 3
  539. })
  540. uni.clearStorageSync();
  541. that.$store.commit('logout')
  542. that.$api.logout()
  543. uni.navigateTo({
  544. url: `/pages/public/login`
  545. })
  546. }
  547. }
  548. })
  549. },
  550. /**
  551. * 统一跳转接口,拦截未登录路由
  552. * navigator标签现在默认没有转场动画,所以用view
  553. */
  554. navTo(url) {
  555. if (!this.hasLogin) {
  556. url = '/pages/public/login';
  557. }
  558. uni.navigateTo({
  559. url
  560. })
  561. },
  562. mycarClick(carNo) {
  563. this.modalName = null
  564. uni.navigateTo({
  565. url: `/pageB/car/mycar_detail?carNo=${carNo}`
  566. })
  567. },
  568. qrClick(userInfo) {
  569. this.modalName = null
  570. uni.navigateTo({
  571. url: `/pages/user/qr`
  572. })
  573. },
  574. scanCode() {
  575. uni.scanCode({
  576. success: function(res) {
  577. uni.navigateTo({
  578. url: res.result
  579. })
  580. }
  581. })
  582. },
  583. hideModal(e) {
  584. this.modalName = null
  585. },
  586. }
  587. }
  588. </script>
  589. <style lang='scss' scoped>
  590. page {
  591. background: #F8F9FC;
  592. }
  593. .container {
  594. padding-top: 85px;
  595. padding-top: 35px;
  596. background-color: #F5F6FA;
  597. position: relative;
  598. width: 100vw;
  599. overflow: hidden;
  600. background: url('~@/static/img/login/bg_slices/bg@3x.png');
  601. background-size: 100% 100%;
  602. margin: 0 auto;
  603. }
  604. .cu-tag.badge {
  605. right: 26rpx;
  606. }
  607. .path {
  608. color: #007aff;
  609. display: inline-block;
  610. text-align: center;
  611. }
  612. .icon {
  613. margin-right: 10rpx;
  614. }
  615. .portrait-box {
  616. margin-top: 20rpx;
  617. }
  618. .qr-wrap {
  619. margin-top: 20upx;
  620. color: #fff;
  621. font-size: 32rpx;
  622. }
  623. .cu-list {
  624. /* height: 483rpx;
  625. overflow-y: scroll; */
  626. margin-top: 16rpx;
  627. margin-bottom: 80rpx;
  628. }
  629. .cu-list.grid>.cu-item .badge_user {
  630. color: #fff;
  631. border: 1px solid #fff;
  632. background-color: #FF6600;
  633. display: inline-block;
  634. padding: .25em .25em;
  635. position: absolute;
  636. font-size: 9px;
  637. font-weight: 700;
  638. line-height: 1;
  639. text-align: center;
  640. white-space: nowrap;
  641. vertical-align: top;
  642. right: 26px;
  643. top: -10px;
  644. z-index: 2;
  645. border-radius: 50%;
  646. transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  647. }
  648. @keyframes move_wave {
  649. 0% {
  650. transform: translateX(0) translateZ(0) scaleY(1)
  651. }
  652. 50% {
  653. transform: translateX(-25%) translateZ(0) scaleY(0.55)
  654. }
  655. 100% {
  656. transform: translateX(-50%) translateZ(0) scaleY(1)
  657. }
  658. }
  659. .bg {
  660. position: relative;
  661. height: 300rpx;
  662. /* background: linear-gradient(to bottom, #56ccf2, #2f80ed); */
  663. /*background: linear-gradient(to bottom, #0be9fe, #4bb0fe); */
  664. background: linear-gradient(to bottom, #d5f8ff, #56ccf2);
  665. }
  666. .bg_ware {
  667. position: absolute;
  668. left: 0;
  669. bottom: -2rpx;
  670. width: 100%;
  671. mix-blend-mode: screen;
  672. height: 224rpx;
  673. }
  674. %flex-center {
  675. display: flex;
  676. flex-direction: column;
  677. justify-content: center;
  678. align-items: center;
  679. }
  680. %section {
  681. display: flex;
  682. justify-content: space-around;
  683. align-content: center;
  684. background: #fff;
  685. border-radius: 10upx;
  686. }
  687. .grid-item-box {
  688. flex: 1;
  689. /* position: relative;
  690. */
  691. /* #ifndef APP-NVUE */
  692. display: flex;
  693. /* #endif */
  694. flex-direction: column;
  695. align-items: center;
  696. justify-content: center;
  697. padding: 15px 0;
  698. }
  699. .user-section {
  700. height: 520upx;
  701. padding: 100upx 30upx 0;
  702. position: relative;
  703. .bg {
  704. position: absolute;
  705. left: 0;
  706. top: 0;
  707. width: 100%;
  708. height: 100%;
  709. filter: blur(1px);
  710. box-shadow: 0px 1px 8px #ccc;
  711. /* background:linear-gradient(#0eb0c9,#126bae); */
  712. /* opacity: .7; */
  713. }
  714. }
  715. .user-info-box {
  716. height: 180upx;
  717. /* display:flex; */
  718. /* align-items:center; */
  719. text-align: center;
  720. position: relative;
  721. z-index: 1;
  722. .portrait {
  723. width: 130upx;
  724. height: 130upx;
  725. border: 5upx solid #fff;
  726. border-radius: 50%;
  727. }
  728. .username {
  729. font-size: $font-lg + 3upx;
  730. color: #fff;
  731. margin-top: 20upx;
  732. }
  733. }
  734. .vip-card-box {
  735. display: flex;
  736. flex-direction: column;
  737. color: #f7d680;
  738. height: 240upx;
  739. background: linear-gradient(left, rgba(0, 0, 0, .7), rgba(0, 0, 0, .8));
  740. border-radius: 16upx 16upx 0 0;
  741. overflow: hidden;
  742. position: relative;
  743. padding: 20upx 24upx;
  744. .card-bg {
  745. position: absolute;
  746. top: 20upx;
  747. right: 0;
  748. width: 380upx;
  749. height: 260upx;
  750. }
  751. .b-btn {
  752. position: absolute;
  753. right: 20upx;
  754. top: 16upx;
  755. width: 132upx;
  756. height: 40upx;
  757. text-align: center;
  758. line-height: 40upx;
  759. font-size: 22upx;
  760. color: #36343c;
  761. border-radius: 20px;
  762. background: linear-gradient(left, #f9e6af, #ffd465);
  763. z-index: 1;
  764. }
  765. .tit {
  766. font-size: $font-base+2upx;
  767. color: #f7d680;
  768. margin-bottom: 28upx;
  769. .yticon {
  770. color: #f6e5a3;
  771. margin-right: 16upx;
  772. }
  773. }
  774. .e-b {
  775. font-size: $font-sm;
  776. color: #d8cba9;
  777. margin-top: 10upx;
  778. }
  779. }
  780. .cover-container {
  781. padding: 1px 10px;
  782. padding-bottom: 20rpx;
  783. /* background-color: #F5F6FA; */
  784. /* border-radius: 20px; */
  785. margin-top: 12upx;
  786. .arc {
  787. position: absolute;
  788. left: 0;
  789. top: -34upx;
  790. width: 100%;
  791. height: 36upx;
  792. }
  793. }
  794. .tj-sction {
  795. @extend %section;
  796. .tj-item {
  797. @extend %flex-center;
  798. flex-direction: column;
  799. height: 140upx;
  800. font-size: $font-sm;
  801. color: #75787d;
  802. }
  803. .num {
  804. font-size: $font-lg;
  805. color: $font-color-dark;
  806. margin-bottom: 8upx;
  807. }
  808. }
  809. .order-section {
  810. @extend %section;
  811. padding: 28upx 0;
  812. margin-top: 20upx;
  813. .order-item {
  814. @extend %flex-center;
  815. width: 120upx;
  816. height: 120upx;
  817. border-radius: 10upx;
  818. font-size: $font-sm;
  819. color: $font-color-dark;
  820. }
  821. .yticon {
  822. font-size: 48upx;
  823. margin-bottom: 18upx;
  824. color: #fa436a;
  825. }
  826. .icon-shouhoutuikuan {
  827. font-size: 44upx;
  828. }
  829. }
  830. .history-section {
  831. padding: 30upx 0 0;
  832. margin-top: 20upx;
  833. background: #fff;
  834. border-radius: 10upx;
  835. .sec-header {
  836. display: flex;
  837. align-items: center;
  838. font-size: $font-base;
  839. color: $font-color-dark;
  840. line-height: 40upx;
  841. margin-left: 30upx;
  842. .yticon {
  843. font-size: 44upx;
  844. color: #5eba8f;
  845. margin-right: 16upx;
  846. line-height: 40upx;
  847. }
  848. }
  849. .h-list {
  850. white-space: nowrap;
  851. padding: 30upx 30upx 0;
  852. image {
  853. display: inline-block;
  854. width: 160upx;
  855. height: 160upx;
  856. margin-right: 20upx;
  857. border-radius: 10upx;
  858. }
  859. }
  860. }
  861. .grid {
  862. display: flex;
  863. align-items: center;
  864. flex-wrap: wrap;
  865. /* border-top: 2upx solid rgba(172,172,172,.2); */
  866. .grid-item-3 {
  867. box-sizing: border-box;
  868. width: calc(100% / 3);
  869. border-bottom: 2upx solid rgba(172, 172, 172, .2);
  870. border-right: 2upx solid rgba(172, 172, 172, .2);
  871. text-align: center;
  872. padding: 40upx 0;
  873. position: relative;
  874. /* view{
  875. font-size: $font-sm;
  876. margin-top: 16upx;
  877. color: $font-color-dark;
  878. } */
  879. .grid_icon {
  880. font-size: 48upx;
  881. margin-bottom: 18upx;
  882. color: #fa436a;
  883. }
  884. .tip_text {
  885. display: block;
  886. padding: 4upx 8upx;
  887. text-align: center;
  888. border-radius: 36upx;
  889. font-size: 24upx;
  890. background-color: #fa436a;
  891. color: rgba(255, 255, 255, 1);
  892. position: absolute;
  893. right: 6upx;
  894. top: 6upx;
  895. }
  896. }
  897. .grid-item-3:nth-child(3n + 3),
  898. .grid-item-4:nth-child(4n + 4) {
  899. border-right: none;
  900. }
  901. }
  902. .headPortrait {
  903. width: 75px;
  904. height: 75px;
  905. border-radius: 40px;
  906. border: 2px solid #ffffff;
  907. }
  908. .personal {
  909. margin-top: 10px;
  910. margin-left: 20px;
  911. }
  912. .information {
  913. font-size: 15px;
  914. font-weight: 600;
  915. height: 36px;
  916. }
  917. .indexlow {
  918. /* margin-top: 30px; */
  919. border-radius: 10px;
  920. }
  921. .cu-list>.cu-item:after {
  922. border: none;
  923. }
  924. .sign {
  925. width: 35px;
  926. height: 35px;
  927. top: 4px;
  928. }
  929. .sign1 {
  930. width: 26px;
  931. height: 26px;
  932. top: 4px;
  933. }
  934. .indexUp {
  935. padding: 0 20px;
  936. align-items: center;
  937. }
  938. .cu-list.grid>.cu-item .cu-tag.badge {
  939. color: #fff;
  940. background: #FF6600;
  941. font-size: 9px;
  942. line-height: 5px;
  943. padding: 5px;
  944. }
  945. .cover-container-item {
  946. background: #fff;
  947. border-radius: 10px;
  948. padding: 10px 0;
  949. }
  950. .cover-container-item .cu-list {
  951. margin: 0;
  952. }
  953. .cover-container-item .cu-list.grid>.cu-item [class*=cuIcon] {
  954. margin: 0;
  955. }
  956. .guess-section-wrap-item {
  957. float: left;
  958. width: 38vw;
  959. background: #F9F9FA;
  960. padding: 7px;
  961. margin: 20rpx;
  962. border-radius: 3px;
  963. // width:50%;
  964. }
  965. .guess-section-wrap-item:first-child {
  966. // margin-left:2px;
  967. }
  968. .clearfix:after {
  969. content: "";
  970. display: block;
  971. clear: both;
  972. }
  973. .guess-section-wrap {
  974. padding: 15px;
  975. margin: 10rpx 20rpx;
  976. border-radius: 5px;
  977. background: #fff;
  978. overflow: hidden;
  979. }
  980. .guess-section-wrap .price {
  981. color: #B2B3BB;
  982. display: flex;
  983. align-items: center;
  984. }
  985. .title {
  986. font-size: 28upx;
  987. color: $font-color-dark;
  988. font-weight: bold;
  989. height: 50upx;
  990. line-height: 50upx;
  991. flex: 2.5;
  992. }
  993. .factory {
  994. font-size: 26rpx;
  995. font-weight: 900;
  996. }
  997. .currectprice {
  998. color: rgba(253, 113, 79, 1);
  999. font-size: 18px;
  1000. font-weight: 550;
  1001. vertical-align: middle;
  1002. margin-right: 10px;
  1003. }
  1004. .yesterday {
  1005. font-size: 14px;
  1006. font-weight: 600;
  1007. vertical-align: middle;
  1008. }
  1009. .yesterday.up {
  1010. color: rgba(253, 113, 79, 1);
  1011. }
  1012. .yesterday.down {
  1013. color: #22C572;
  1014. }
  1015. </style>