user.vue 24 KB

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