mycenter.vue 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068
  1. <template>
  2. <view>
  3. <!-- 胶囊 -->
  4. <mvBar :mysNavConfig="mysNavConfig"></mvBar>
  5. <view :style="{marginTop:navH}"></view>
  6. <view>
  7. <view class="head" v-if="token">
  8. <view class="head-left">
  9. <view class="head-avator" @click="toUserInfo()">
  10. <image :src="avatarUrl" mode="" style="width: 100%;height: 100%;border-radius: 100rpx;" />
  11. </view>
  12. <view>
  13. <p style="padding-bottom: 20rpx;font-size: 35rpx;" @click="toUserInfo()">{{nickName}}</p>
  14. <span style="display: flex;align-items: center;">
  15. <p style="font-size: 25rpx;">ID:{{information.id}}</p>
  16. <image :src="picture.icon_copy" mode="" style="width: 40rpx;height: 40rpx;"
  17. @click="handleCopy()" />
  18. </span>
  19. </view>
  20. </view>
  21. <view class="head-right">
  22. <image class="head-message" :src="picture.icon_message" @click="toMessage()"></image>
  23. <view v-if="hasUnReadMessage">
  24. <span class="point"></span>
  25. </view>
  26. </view>
  27. </view>
  28. <view class="head" v-if="!token">
  29. <view class="head-left">
  30. <view class="default-head-avator">
  31. <image :src="picture.defaultavatarUrl" mode="" @tap="login" style="width: 100%;height: 100%;">
  32. </image>
  33. </view>
  34. <view class="head-text">
  35. <p @tap="login" style="font-size: 35rpx;padding-bottom: 10rpx;">未登录</p>
  36. <p @tap="login" style="font-size: 30rpx;">点击登录账号</p>
  37. </view>
  38. </view>
  39. </view>
  40. <view class="show-income1">
  41. <view>
  42. <view style="display: flex;align-items: center;margin-left: 5%;">
  43. <p>我获得的收益总数</p>
  44. <image id="helpicon" :src="picture.icon_help" mode=""
  45. style="width: 35rpx;height: 35rpx;padding-left: 10rpx;" @click="showHelp = true" />
  46. </view>
  47. <view class="tip_box" v-if="showHelp" :style="{ top: boxTop + 'px'}">
  48. <view class="container" :style="{
  49. 'margin-right': cotainerMargin + 'px',
  50. backgroundColor: '#404040', borderRadius: '5px' }">
  51. <!-- 提示文字 -->
  52. <view class="tips">
  53. <p style="font-size: 24rpx;color: #fff">{{Text}}</p>
  54. </view>
  55. <view class="close" @click="showHelp = false">
  56. <image class="closeImg" src="../../static/delete.png" />
  57. </view>
  58. </view>
  59. </view>
  60. </view>
  61. <view class="show-income1-text">
  62. <view style="padding-left: 5%;">
  63. <p style="font-size: 40rpx;font-weight:bold;color: #F0D232;"
  64. @click="toincome('can')">
  65. {{information.showIncome?information.showIncome:'0.00'}}
  66. </p>
  67. </view>
  68. <view>
  69. <button class="show-income1-btn" type="default" @click="toincome('can')">去提现</button>
  70. </view>
  71. </view>
  72. </view>
  73. <view class="show-income2">
  74. <view class="show-income2-text" @click="toincome('can')">
  75. <p style="padding-bottom: 20rpx;">可提现</p>
  76. <p>{{information.showCanwithdraw?information.showCanwithdraw:'0.00'}}</p>
  77. </view>
  78. <view class="show-income2-text" @click="toincome('ed')">
  79. <p style="padding-bottom: 20rpx;">已提现</p>
  80. <p>{{information.showWithdrawed?information.showWithdrawed:'0.00'}}</p>
  81. </view>
  82. <view class="show-income2-text" @click="toincome('ing')">
  83. <p style="padding-bottom: 20rpx;">提现中</p>
  84. <p>{{information.showWithdrawing?information.showWithdrawing:'0.00'}}</p>
  85. </view>
  86. </view>
  87. <view class="show-body" style="border-bottom: 1rpx solid #c8c8c8;">
  88. <view class="show-body1">
  89. <view class="show-body1-text1" @click="tomytask('all')">
  90. <p>我的任务</p>
  91. </view>
  92. <view class="show-body1-text2" @click="tomytask('all')">
  93. <image class="show-body1-icon" :src="picture.icon_right"></image>
  94. </view>
  95. </view>
  96. <view class="show-body2">
  97. <view class="show-body2-text" @click="tomytask('all')">
  98. <p class="task-num-p">{{information.task_all?information.task_all:0}}</p>
  99. <p padding>全部任务</p>
  100. </view>
  101. <view class="show-body2-text" @click="tomytask('apply')">
  102. <p class="task-num-p">{{information.task_apply?information.task_apply:0}}
  103. <p>
  104. <p>已报名</p>
  105. </view>
  106. <view class="show-body2-text" @click="tomytask('execute')">
  107. <p class="task-num-p">{{information.task_execute?information.task_execute:0}}</p>
  108. <p>执行中</p>
  109. </view>
  110. <view class="show-body2-text" @click="tomytask('end')">
  111. <p class="task-num-p">{{ information.task_end ? information.task_end:0}}</p>
  112. <p>已结束</p>
  113. </view>
  114. </view>
  115. </view>
  116. <view class="show-body">
  117. <view class="show-body2">
  118. <view class="show-body2-text" @click="handleInformation()">
  119. <image class="show-info-icon" style="width: 60rpx;height: 60rpx;padding-bottom: 15rpx;" :src="picture.icon_person"></image>
  120. <p>我的信息</p>
  121. </view>
  122. <view class="show-body2-text" @click="handleSubmitTask()">
  123. <image class="show-info-icon" :src="picture.icon_edit"></image>
  124. <p>发布任务</p>
  125. </view>
  126. <view class="show-body2-text">
  127. <p style="color: #fff;">联系客服</p>
  128. </view>
  129. <view class="show-body2-text">
  130. <p style="color: #fff;">客服</p>
  131. </view>
  132. </view>
  133. </view>
  134. <view class="contact" @click="toggle4('center')">
  135. <view class="contt">
  136. <!-- <image class="img2" src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/home2.png" mode=""></image> -->
  137. <image class="img1"
  138. src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/kefu_20211124192542.png" mode="">
  139. </image>
  140. </view>
  141. </view>
  142. <!-- 普通弹窗 公众号-->
  143. <uni-popup ref="popup2" class="share" background-color="#fff" @change="change">
  144. <view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
  145. <view class="sharepage">
  146. <view class="Tasktext1">
  147. <image :src="picture.task15" mode=""></image>
  148. <span>YoungGee</span>
  149. </view>
  150. <view class="" style="margin-top: 5%;">
  151. <p style='color: #333333;font-size: 28rpx;text-align: center;'>不错过任何上新</p>
  152. </view>
  153. <view class="" style="margin-top: 5%;">
  154. <p style='color: #333333;font-size: 24rpx;'>公众号:</p>
  155. </view>
  156. <view class="sharemap">
  157. <image src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/gzh.png" mode="">
  158. </image>
  159. </view>
  160. </view>
  161. </view>
  162. </uni-popup>
  163. <!-- 普通弹窗 商务合作-->
  164. <uni-popup ref="popup3" class="share" background-color="#fff" @change="change">
  165. <view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
  166. <view class="sharepage">
  167. <view class="Tasktext1">
  168. <image :src="picture.task15" mode=""></image>
  169. <span>YoungGee</span>
  170. </view>
  171. <view class="" style="margin-top: 5%;">
  172. <p style='color: #333333;font-size: 28rpx;text-align: center;'>商务合作请联系我们</p>
  173. </view>
  174. <view class="" style="margin-top: 5%;">
  175. <p style='color: #333333;font-size: 24rpx;'>电话:010-53355656</p>
  176. <p style='color: #333333;font-size: 24rpx;'>商务:</p>
  177. </view>
  178. <view class="sharemap" style="margin-bottom: 5%;margin-top: 5%;">
  179. <image src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/shangwu.png" mode="">
  180. </image>
  181. </view>
  182. </view>
  183. </view>
  184. </uni-popup>
  185. <!-- 普通弹窗 公众号-->
  186. <uni-popup ref="popup4" class="share" background-color="#fff" @change="change" :maskClick="false">
  187. <view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
  188. <view class="sharepage">
  189. <view class="projecttext1">
  190. <image src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/younggee_logo.png"
  191. style="width: 250rpx; height: 80rpx;" mode=""></image>
  192. <!-- <span>YoungGee</span> -->
  193. </view>
  194. <view class="sharemap">
  195. <image :src="kefuUrl" style="width: 400rpx;height: 400rpx;" mode=""></image>
  196. </view>
  197. <view style="margin: 30rpx 0;">
  198. <button class="butmin1" size="mini" @tap="saveImage">保存二维码</button>
  199. </view>
  200. <view class="sharetxt">
  201. <text>
  202. 使用样叽的过程中,有任何疑问,\n
  203. 请添加上方微信。\n
  204. 我们保证及时全力为您解决!
  205. </text>
  206. </view>
  207. <view style="margin: 30rpx 0;">
  208. <button class="butmin" size="mini" @tap="closepop">知道了</button>
  209. </view>
  210. </view>
  211. </view>
  212. </uni-popup>
  213. </view>
  214. <!-- 普通弹窗 公众号-->
  215. <uni-popup ref="popup4" class="share" background-color="#fff" @change="change" :maskClick="false">
  216. <view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
  217. <view class="sharepage">
  218. <view class="projecttext1">
  219. <image src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/younggee_logo.png"
  220. style="width: 250rpx; height: 80rpx;" mode=""></image>
  221. <!-- <span>YoungGee</span> -->
  222. </view>
  223. <view class="sharemap">
  224. <image :src="kefuUrl" style="width: 400rpx;height: 400rpx;" mode=""></image>
  225. </view>
  226. <view style="margin: 30rpx 0;">
  227. <button class="butmin1" size="mini" @tap="saveImage">保存二维码</button>
  228. </view>
  229. <view class="sharetxt">
  230. <text>
  231. 使用样叽的过程中,有任何疑问,\n
  232. 请添加上方微信。\n
  233. 我们保证及时全力为您解决!
  234. </text>
  235. </view>
  236. <view style="margin: 30rpx 0;">
  237. <button class="butmin" size="mini" @tap="closepop">知道了</button>
  238. </view>
  239. </view>
  240. </view>
  241. </uni-popup>
  242. <!-- 普通弹窗 发布任务-->
  243. <uni-popup ref="popup5" class="share" background-color="#fff" @change="change">
  244. <view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
  245. <view class="sharepage">
  246. <view class="projecttext1">
  247. <span style="color: #f72424;font-size: 36rpx;line-height: 50rpx;">发布任务请用PC登录</span>
  248. <span style="color: #f72424;font-size: 36rpx;line-height: 50rpx;">www.younggee.com</span>
  249. </view>
  250. <view class="projecttext1" style="height: 40rpx;margin: 60rpx 0 10rpx;">
  251. <span style="font-size: 28rpx;line-height: 30rpx;">使用有任何疑问请联系样叽客服</span>
  252. </view>
  253. <view class="sharemap">
  254. <image :src="kefuUrl" style="width: 400rpx;height: 400rpx;" mode=""></image>
  255. </view>
  256. <view style="margin: 30rpx 0;">
  257. <button class="butmin1" size="mini" @tap="saveImage">保存二维码</button>
  258. </view>
  259. </view>
  260. </view>
  261. </uni-popup>
  262. <!-- <view class="" style="text-align: center;margin: 5% 0;">
  263. <button size="mini" @tap="toSpecialTask()">专项测试</button>
  264. </view> -->
  265. </view>
  266. </template>
  267. <script>
  268. import mvBar from "@/components/mys_navBar/mysNavBar";
  269. import {
  270. saveImageToPhotosAlbum,
  271. showToast,
  272. downloadFile
  273. } from '@/uni_modules/sakura-canvas/js_sdk/util';
  274. import {
  275. money
  276. } from '@/components/utils.js';
  277. export default {
  278. components: {
  279. mvBar,
  280. },
  281. data() {
  282. return {
  283. kefuUrl: "https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/kefu.jpeg",
  284. navH: getApp().globalData.navHeight,
  285. hasUnReadMessage: false,
  286. Text: "在平台产生的总收益【可提现+已提现+提现中】",
  287. showHelp: false,
  288. boxTop: 0,
  289. arrowMargin: 0,
  290. cotainerMargin: 0,
  291. screenWidth: 0,
  292. picture: {
  293. icon_help: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent_upload/icon-help.png',
  294. icon_copy: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent_upload/icon-copy.png',
  295. icon_person: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/youngee/talent_upload/icon-person.png',
  296. icon_edit: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent_upload/icon-edit2.png',
  297. icon_location: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/youngee/talent_upload/icon-location.png',
  298. icon_account: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/youngee/talent_upload/icon-account.png',
  299. icon_rmb: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/youngee/talent_upload/icon-rmb.png',
  300. icon_message: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/youngee/talent_upload/icon-message.png',
  301. icon_right: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent_upload/icon-arrow-right.png',
  302. defaultavatarUrl: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/logoxin01.png',
  303. },
  304. token: '',
  305. nickName: '',
  306. avatarUrl: '',
  307. type: 'center',
  308. type2: 'center',
  309. type3: 'center',
  310. type4: 'center',
  311. mysNavConfig: {
  312. /* 开启单页显示首页图标 */
  313. isHome: true,
  314. /* 固定导航 */
  315. navFixed: true,
  316. /* 标题 (屏幕中心居中 两边图标中心居中使用slot center1) */
  317. navTitle: {
  318. text: "我的",
  319. color: "",
  320. fontSize: "32rpx", // px upx rpx
  321. fontWeight: "normal", // 100 - 700
  322. },
  323. },
  324. codeImg: '',
  325. information: {},
  326. };
  327. },
  328. onReady() {
  329. this.init()
  330. },
  331. async onShow() {
  332. // 显示加载中
  333. uni.showLoading({
  334. title: '加载中'
  335. });
  336. // 判断登陆是否过期
  337. this.token = uni.getStorageSync('token')
  338. await this.$https.get('/youngee/c/t/g/is-login')
  339. .then(res => {
  340. if (res.data.code == 403) {
  341. this.token = ""
  342. uni.hideLoading();
  343. }
  344. })
  345. if (this.token !== '') { // 若登录
  346. this.nickName = uni.getStorageSync('nickName');
  347. this.avatarUrl = uni.getStorageSync('avatarUrl');
  348. // 获取达人基本信息
  349. await this.$https.get('/youngee/c/t/g/get-talent-info')
  350. .then(res => {
  351. if (res.data.code === 0) {
  352. this.information = res.data.data
  353. this.information.showWithdrawing = money(this.information.withdrawing)
  354. this.information.showWithdrawed = money(this.information.withdrawed)
  355. this.information.showCanwithdraw = money(this.information.canwithdraw)
  356. this.information.showIncome = money(this.information.income)
  357. }
  358. });
  359. // 获取达人参与任务数量
  360. await this.$https.get('/youngee/c/t/g/get-task-num')
  361. .then(res => {
  362. console.log(res)
  363. if (res.data.code === 0) {
  364. this.information.task_all = res.data.data.all_num
  365. this.information.task_apply = res.data.data.sign_up_num
  366. this.information.task_execute = res.data.data.going_on_num
  367. this.information.task_end = res.data.data.completed_num
  368. }
  369. })
  370. await this.$https.get('/youngee/c/t/g/has-un-read-message')
  371. .then(res => {
  372. if (res.data.code === 0) {
  373. this.hasUnReadMessage = res.data.data === 0 ? false : true;
  374. }
  375. })
  376. } else { // 未登录
  377. // this.login();
  378. }
  379. uni.hideLoading();
  380. },
  381. onLoad() {},
  382. methods: {
  383. toSpecialTask() {
  384. uni.navigateTo({
  385. url: '/pages/tasksquare/specialTask/specialTaskDetail?id=' + "2302497478"
  386. });
  387. },
  388. init() {
  389. let rect = uni.getMenuButtonBoundingClientRect();
  390. let screenWidth = uni.getSystemInfoSync().screenWidth;
  391. // this.boxTop = rect.bottom;
  392. this.arrowMargin = rect.width * 0.75 + 4;
  393. this.cotainerMargin = screenWidth - rect.right;
  394. var that = this;
  395. const query = uni.createSelectorQuery().in(that);
  396. query.select('#helpicon').boundingClientRect(data => {
  397. this.boxTop = data.bottom;
  398. console.log(data)
  399. }).exec();
  400. },
  401. handleCopy() {
  402. wx.setClipboardData({
  403. data: this.information.id,
  404. success: function(res) {
  405. console.log("复制成功");
  406. }
  407. });
  408. },
  409. // 进入登录页面
  410. login() {
  411. uni.navigateTo({
  412. url: '../login/login'
  413. });
  414. },
  415. // 进入头像昵称修改页面
  416. toUserInfo() {
  417. uni.navigateTo({
  418. url: '../login/userinfo'
  419. });
  420. },
  421. // 进入通知页面
  422. toMessage() {
  423. uni.navigateTo({
  424. url: 'message'
  425. });
  426. },
  427. // 进入个人资料
  428. handleInformation() {
  429. if (this.token !== '')
  430. uni.navigateTo({
  431. url: '/pages/mycenter/myinformation/myinformation'
  432. });
  433. else
  434. this.login()
  435. },
  436. // 进入收益页面
  437. toincome(tab) {
  438. console.log(tab)
  439. if (this.token !== '') {
  440. switch (tab) {
  441. case "can":
  442. uni.navigateTo({
  443. url: '/pages/mycenter/myincome?showTab=1'
  444. });
  445. break;
  446. case "ed":
  447. uni.navigateTo({
  448. url: '/pages/mycenter/myincome?showTab=2'
  449. });
  450. break;
  451. case "ing":
  452. uni.navigateTo({
  453. url: '/pages/mycenter/myincome?showTab=3'
  454. });
  455. break;
  456. }
  457. } else
  458. this.login()
  459. },
  460. // 进入我的任务页面
  461. tomytask(tab) {
  462. console.log(tab)
  463. if (this.token !== '') {
  464. var data = {
  465. tab: tab
  466. };
  467. data = JSON.stringify(data)
  468. uni.navigateTo({
  469. url: '/pages/mycenter/mytask/mytask?textObj=' + encodeURIComponent(data)
  470. });
  471. } else
  472. this.login()
  473. },
  474. // 保留两位小数点
  475. toDecimal(x) {
  476. var f = parseFloat(x);
  477. if (isNaN(f)) {
  478. return;
  479. }
  480. f = Math.round(x * 100) / 100;
  481. return f;
  482. },
  483. //弹出层
  484. change(e) {
  485. console.log('当前模式:' + e.type + ',状态:' + e.show);
  486. },
  487. togo2(type) {
  488. this.type2 = type
  489. // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
  490. this.$refs.popup2.open(type)
  491. // this.$refs.popup1.close()
  492. },
  493. togo3(type) {
  494. this.type3 = type
  495. // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
  496. this.$refs.popup3.open(type)
  497. // this.$refs.popup1.close()
  498. },
  499. toggle4(type) {
  500. this.type4 = type
  501. // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
  502. this.$refs.popup4.open(type)
  503. // this.$refs.popup1.close()
  504. },
  505. // 保存图片
  506. async saveImage() {
  507. // showToast('保存成功')
  508. wx.downloadFile({
  509. url: this.kefuUrl,
  510. success: function(res) {
  511. wx.saveImageToPhotosAlbum({
  512. filePath: res.tempFilePath,
  513. success: function(data) {
  514. wx.showToast({
  515. title: "保存成功",
  516. icon: "success",
  517. duration: 2000
  518. })
  519. },
  520. fail: function(err) {
  521. console.log(err);
  522. },
  523. complete(res) {
  524. console.log(res);
  525. }
  526. })
  527. }
  528. })
  529. },
  530. closepop() {
  531. this.$refs.popup4.close()
  532. },
  533. // 进入个人资料
  534. handleSubmitTask() {
  535. // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
  536. this.$refs.popup5.open()
  537. // this.$refs.popup1.close()
  538. },
  539. },
  540. };
  541. </script>
  542. <style>
  543. /deep/ .share .uni-popup .uni-popup__wrapper {
  544. width: 70% !important;
  545. border-radius: 15rpx !important;
  546. }
  547. </style>
  548. <style lang="scss" scoped>
  549. p {
  550. font-size: 32rpx;
  551. }
  552. .head {
  553. display: flex;
  554. /* 垂直居中 */
  555. align-items: center;
  556. justify-content: space-between;
  557. height: 200rpx;
  558. position: relative;
  559. margin: 2% 3% 3%;
  560. }
  561. .head-left {
  562. display: flex;
  563. align-items: center;
  564. }
  565. .head-right {
  566. display: flex;
  567. }
  568. .default-head-avator {
  569. display: inline-block;
  570. margin: 0 25rpx;
  571. padding: 10rpx 10rpx 0 0;
  572. width: 120rpx;
  573. height: 120rpx;
  574. background-color: #F0D232;
  575. border-radius: 50%;
  576. }
  577. .head-avator {
  578. display: inline-block;
  579. margin: 0 25rpx;
  580. width: 120rpx;
  581. height: 120rpx;
  582. background-color: #F0D232;
  583. border-radius: 50%;
  584. }
  585. .head-text {
  586. display: inline-block;
  587. }
  588. .head-message {
  589. margin: 10rpx 20rpx 10rpx 100rpx;
  590. width: 60rpx;
  591. height: 60rpx;
  592. }
  593. .show-income1 {
  594. height: 150rpx;
  595. margin: 0 3%;
  596. }
  597. .show-income1-text {
  598. display: flex;
  599. align-items: center;
  600. justify-content: space-between;
  601. padding: 0 5%;
  602. margin-top: 30rpx;
  603. }
  604. .show-income1-text2 {
  605. flex: 1;
  606. display: flex;
  607. }
  608. .show-income1-btn {
  609. width: auto;
  610. // padding: 0 40rpx;
  611. text-align: center;
  612. background-color: #F0D232;
  613. border-radius: 15rpx;
  614. font-size: 32rpx;
  615. line-height: 200%;
  616. }
  617. .show-income2 {
  618. display: flex;
  619. align-items: center;
  620. justify-content: space-between;
  621. height: 150rpx;
  622. margin: 0 3% 3%;
  623. background-color: #F0D232;
  624. border-radius: 10rpx;
  625. padding: 0 5%;
  626. }
  627. .show-income2-text {
  628. width: 24%;
  629. text-align: center;
  630. }
  631. .show-body {
  632. height: 250rpx;
  633. margin: 0 3% 3%;
  634. }
  635. .show-body1 {
  636. display: flex;
  637. align-items: center;
  638. height: 80rpx;
  639. }
  640. .show-body1-text1 {
  641. display: flex;
  642. justify-content: flex-start;
  643. margin-left: 40rpx;
  644. // margin-right: 480rpx;
  645. }
  646. .show-body1-text2 {
  647. display: flex;
  648. justify-content: flex-end;
  649. margin-right: 20rpx;
  650. flex: 1;
  651. // display: flex;
  652. }
  653. .show-body1-icon {
  654. width: 30rpx;
  655. height: 30rpx;
  656. }
  657. .show-body2 {
  658. // display: flex;
  659. // align-items: center;
  660. // justify-content: space-between;
  661. display: flex;
  662. align-items: center;
  663. justify-content: space-between;
  664. padding: 0 5%;
  665. }
  666. .show-body2-text {
  667. // width: 150rpx;
  668. width: 22%;
  669. text-align: center;
  670. }
  671. .task-num-p {
  672. padding-bottom: 40rpx;
  673. font-size: 35rpx;
  674. font-weight: bold;
  675. color: #F0D232;
  676. }
  677. .shu-line {
  678. border: 1rpx solid #BCBCBC;
  679. float: left;
  680. height: 70rpx;
  681. margin: 0 10rpx;
  682. margin-bottom: 30rpx;
  683. }
  684. .show-info {
  685. display: flex;
  686. align-items: center;
  687. justify-content: space-between;
  688. padding: 0 40rpx;
  689. }
  690. .show-info-text {
  691. text-align: center;
  692. }
  693. .show-info-icon {
  694. width: 50rpx;
  695. height: 50rpx;
  696. padding-bottom: 20rpx;
  697. }
  698. .butto {
  699. text-align: center;
  700. }
  701. .option {
  702. padding: 20rpx;
  703. }
  704. .uni-margin-wrap {
  705. width: 690rpx;
  706. width: 100%;
  707. ;
  708. }
  709. .swiper {
  710. height: 300rpx;
  711. }
  712. .swiper-item {
  713. display: block;
  714. height: 300rpx;
  715. line-height: 300rpx;
  716. text-align: center;
  717. }
  718. .swiper-list {
  719. margin-top: 40rpx;
  720. margin-bottom: 0;
  721. }
  722. .uni-common-mt {
  723. margin-top: 60rpx;
  724. position: relative;
  725. }
  726. .info {
  727. position: absolute;
  728. right: 20rpx;
  729. }
  730. .uni-padding-wrap {
  731. width: 550rpx;
  732. padding: 0 100rpx;
  733. }
  734. .card {
  735. width: 88%;
  736. // height: 200rpx;
  737. padding: 24rpx;
  738. margin-top: 30rpx;
  739. border-radius: 15rpx;
  740. background-color: #ffffff;
  741. margin: 0 auto;
  742. box-shadow: 0px 0px 10rpx 2rpx #ffffff;
  743. }
  744. .iimmg {
  745. width: 80rpx;
  746. height: 80rpx;
  747. background-color: #FFFFFF;
  748. border-radius: 15%;
  749. }
  750. .iimmg image {
  751. width: 60%;
  752. height: 60%;
  753. padding: 20%;
  754. }
  755. .ppan {
  756. font-size: 60%;
  757. margin-top: 1%;
  758. }
  759. .headportrait {
  760. margin: 0 auto;
  761. width: 180rpx;
  762. height: 180rpx;
  763. background-color: #FEE58E;
  764. border-radius: 50%;
  765. }
  766. .task22 {
  767. width: 80%;
  768. height: 80%;
  769. padding: 10%;
  770. }
  771. .but1 {
  772. // width: 120%;
  773. text-align: center;
  774. background-color: #1890FF;
  775. color: #FFFFFF;
  776. border-radius: 10rpx;
  777. font-size: 34rpx;
  778. line-height: 150%;
  779. font-weight: 500;
  780. height: 60%;
  781. }
  782. .dou p {
  783. font-size: 26rpx;
  784. color: #333333;
  785. font-weight: 550;
  786. text-align: center;
  787. }
  788. .dou span {
  789. font-size: 24rpx;
  790. color: #666666;
  791. text-align: center;
  792. }
  793. .title-left {
  794. width: 4rpx;
  795. height: 80rpx;
  796. background: #E2E2E2;
  797. display: inline-block;
  798. border-radius: 1rpx;
  799. margin-top: 4rpx;
  800. vertical-align: top;
  801. }
  802. .share {
  803. text-align: center;
  804. line-height: 10rpx;
  805. margin-top: 10rpx;
  806. }
  807. .share image {
  808. vertical-align: middle;
  809. width: 25rpx;
  810. height: 25rpx;
  811. display: inline-block
  812. }
  813. .share p {
  814. // display: inline-block;
  815. font-size: 24rpx;
  816. // color: #333333;
  817. }
  818. /deep/ .share.uni-popup .uni-popup__wrapper {
  819. width: 70%;
  820. border-radius: 15rpx;
  821. }
  822. .Tasktext1 {
  823. // padding-top: 5%;
  824. padding: 0 0 0 1%;
  825. height: 80rpx;
  826. margin-top: 7%;
  827. text-align: center;
  828. }
  829. .Tasktext1 span {
  830. color: #333333;
  831. font-size: 100%;
  832. font-weight: 550;
  833. text-indent: 2em;
  834. }
  835. .Tasktext1 image {
  836. vertical-align: middle;
  837. width: 80rpx;
  838. height: 80rpx;
  839. display: inline-block;
  840. padding-right: 14rpx;
  841. }
  842. .butmin {
  843. height: 48rpx;
  844. background-color: #3397FA;
  845. color: #FFFFFF;
  846. line-height: 48rpx;
  847. }
  848. .tip_box {
  849. position: fixed;
  850. top: 0;
  851. right: 0;
  852. z-index: 9999;
  853. display: flex;
  854. justify-content: flex-end;
  855. align-items: flex-end;
  856. flex-direction: column;
  857. .arrow {
  858. width: 0;
  859. height: 0;
  860. border: 10rpx solid;
  861. border-color: transparent;
  862. }
  863. .container {
  864. display: flex;
  865. align-items: center;
  866. justify-content: center;
  867. padding: 16rpx 24rpx;
  868. .tips {
  869. flex: 1;
  870. padding-right: 12rpx;
  871. }
  872. .close {
  873. display: flex;
  874. align-items: center;
  875. height: 30rpx;
  876. width: 30rpx;
  877. .closeImg {
  878. height: 100%;
  879. width: 100%;
  880. }
  881. }
  882. }
  883. }
  884. .point {
  885. position: absolute;
  886. // top: 0;
  887. right: 5px;
  888. width: 20rpx;
  889. height: 20rpx;
  890. background: red;
  891. border-radius: 50%;
  892. }
  893. .contt {
  894. position: relative;
  895. }
  896. .contact {
  897. position: fixed;
  898. top: 80%;
  899. right: 13%;
  900. }
  901. .img1 {
  902. width: 84rpx;
  903. height: 124rpx;
  904. position: absolute;
  905. }
  906. //弹窗
  907. .sharepage {
  908. // width: 90%;
  909. margin: 0 auto;
  910. // position: relative;
  911. }
  912. /deep/ .share.uni-popup .uni-popup__wrapper {
  913. width: 70%;
  914. border-radius: 15rpx;
  915. }
  916. .projecttext1 {
  917. // padding-top: 5%;
  918. padding: 0 0 0 1%;
  919. height: 80rpx;
  920. margin: 5% 0;
  921. text-align: center;
  922. }
  923. .projecttext1 image {
  924. vertical-align: middle;
  925. width: 80rpx;
  926. height: 80rpx;
  927. display: inline-block;
  928. padding-right: 14rpx;
  929. }
  930. .sharemap {
  931. margin: 0 auto;
  932. text-align: center;
  933. // margin-top: 15%;
  934. // margin-bottom: 15%;
  935. }
  936. .sharemap image {
  937. width: 400rpx;
  938. height: 400rpx;
  939. }
  940. .sharetxt {
  941. height: 100rpx;
  942. display: flex;
  943. flex-direction: column;
  944. align-items: center;
  945. justify-content: center;
  946. }
  947. .sharetxt text {
  948. font-size: 24rpx;
  949. text-align: left;
  950. line-height: 20rpx
  951. }
  952. .butmin {
  953. // height: 48rpx;
  954. width: 250rpx;
  955. background-color: #FCCF41;
  956. line-height: 48rpx;
  957. }
  958. .butmin1 {
  959. // height: 48rpx;
  960. width: 250rpx;
  961. background-color: #fff;
  962. border: #000000 1rpx solid;
  963. line-height: 48rpx;
  964. }
  965. </style>