personal-infor.vue 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858
  1. <template>
  2. <view class="index-page">
  3. <!-- 个人信息 -->
  4. <view class="personal">
  5. <view class="u-flex u-row-between">
  6. <text>头像</text>
  7. <image :src="avatar" style="width: 120rpx;height: 120rpx;border-radius: 50%;" mode=""></image>
  8. </view>
  9. <view class="body-input u-flex-col u-row-center "
  10. style="margin-top:32rpx ;padding-top:30rpx ;border-top:2rpx solid #F0F0F0 ;" @click="tochangename">
  11. <text class="input-title">真实姓名</text>
  12. <u--input customStyle="padding:0 !important" type="text" placeholder="请填写您的真实姓名" border
  13. placeholderClass='input-style' v-model="from.name"></u--input>
  14. </view>
  15. <view class="body-input u-flex-col u-row-center" @click="sexShow = true">
  16. <text class="input-title">性别</text>
  17. <u--input v-if="from.sex == 'male'" value="男" :disabled="true" disabledColor="#fff"
  18. customStyle="padding:0 !important" type="text" placeholder="请选择您的性别" border
  19. placeholderClass='input-style' suffixIcon="arrow-right"
  20. suffixIconStyle="font-size: 32rpx;font-weight: 400;color: #CACACA;" v-mode="sexvalue"></u--input>
  21. <u--input v-if="from.sex == 'female'" value="女" :disabled="true" disabledColor="#fff"
  22. customStyle="padding:0 !important" type="text" placeholder="请选择您的性别" border
  23. placeholderClass='input-style' suffixIcon="arrow-right"
  24. suffixIconStyle="font-size: 32rpx;font-weight: 400;color: #CACACA;" v-mode="sexvalue">女</u--input>
  25. <u--input v-if="from.sex == 'secret'" value="保密" :disabled="true" disabledColor="#fff"
  26. customStyle="padding:0 !important" type="text" placeholder="请选择您的性别" border
  27. placeholderClass='input-style' suffixIcon="arrow-right"
  28. suffixIconStyle="font-size: 32rpx;font-weight: 400;color: #CACACA;" v-mode="sexvalue"></u--input>
  29. </view>
  30. <view class="body-input u-flex-col u-row-center" @click="birthdayBtn">
  31. <text class="input-title">出生年月</text>
  32. <u--input :disabled="true" disabledColor="#fff" customStyle="padding:0 !important" type="text"
  33. placeholder="请选择您的出生年月" border placeholderClass='input-style' suffixIcon="arrow-right"
  34. suffixIconStyle="font-size: 32rpx;font-weight: 400;color: #CACACA;"
  35. v-model="from.birthday"></u--input>
  36. </view>
  37. <!-- <view class="body-input u-flex-col u-row-center" style="height: 128rpx;">
  38. <view class="u-flex u-row-between ">
  39. <view class="">
  40. <text class="input-title">求职身份</text>
  41. </view>
  42. <u-subsection :list="list" :current="current" @change="sectionChange"
  43. v-model="from.job_role"></u-subsection>
  44. </view>
  45. </view> -->
  46. <view class="body-input u-flex-col u-row-center" @click="cityShow = true">
  47. <text class="input-title">户口所在地</text>
  48. <u--input :disabled="true" disabledColor="#fff" customStyle="padding:0 !important" type="text"
  49. placeholder="请选择您的户口所在地" border placeholderClass='input-style' suffixIcon="arrow-right"
  50. suffixIconStyle="font-size: 32rpx;font-weight: 400;color: #CACACA;" v-model="city1"></u--input>
  51. </view>
  52. <view class="body-input u-flex-col u-row-center" @click="jobShow = true">
  53. <text class="input-title">当前求职状态</text>
  54. <u--input :disabled="true" disabledColor="#fff" customStyle="padding:0 !important" type="text"
  55. placeholder="请选择您当前求职状态" border placeholderClass='input-style' suffixIcon="arrow-right"
  56. suffixIconStyle="font-size: 32rpx;font-weight: 400;color: #CACACA;" v-model="job"></u--input>
  57. </view>
  58. <view class="body-input u-flex-col u-row-center" @click="workBtn">
  59. <text class="input-title">参加工作时间</text>
  60. <u--input :disabled="true" disabledColor="#fff" customStyle="padding:0 !important" type="text"
  61. placeholder="请选择您参加工作的时间" border placeholderClass='input-style' suffixIcon="arrow-right"
  62. suffixIconStyle="font-size: 32rpx;font-weight: 400;color: #CACACA;"
  63. v-model="from.job_time"></u--input>
  64. </view>
  65. <view class="body-input u-flex-col u-row-center">
  66. <text class="input-title">邮箱</text>
  67. <u--input customStyle="padding:0 !important" type="text" placeholder="请填写(选填)" border
  68. placeholderClass='input-style' v-model="from.email"></u--input>
  69. </view>
  70. <view class="body-input u-flex-col u-row-center">
  71. <text class="input-title">手机号</text>
  72. <view class="" @click="tishi">
  73. <u--input :disabled="true" customStyle="padding:0 !important" type="text" placeholder="请填写" border
  74. placeholderClass='input-style' v-model="from.mobile"></u--input>
  75. </view>
  76. </view>
  77. <view class="body-input u-flex-col u-row-center" @click="maritalShow = true">
  78. <text class="input-title">婚姻状态</text>
  79. <u--input :disabled="true" disabledColor="#fff" customStyle="padding:0 !important" type="text"
  80. placeholder="请选择(选填)" border placeholderClass='input-style' suffixIcon="arrow-right"
  81. suffixIconStyle="font-size: 32rpx;font-weight: 400;color: #CACACA;" v-model="status"></u--input>
  82. </view>
  83. <view class="body-input u-flex-col u-row-center" @click="politicsShow = true">
  84. <text class="input-title">政治面貌</text>
  85. <u--input :disabled="true" disabledColor="#fff" customStyle="padding:0 !important" type="text"
  86. placeholder="请选择(选填)" border placeholderClass='input-style' suffixIcon="arrow-right"
  87. suffixIconStyle="font-size: 32rpx;font-weight: 400;color: #CACACA;" v-model="politics"></u--input>
  88. </view>
  89. <view class="button" @click="next">
  90. 保存
  91. </view>
  92. </view>
  93. <!-- 选择器 -->
  94. <u-picker title="性别" :show="sexShow" @confirm="sexConfirm" :columns="sexdata" @cancel='close()'></u-picker>
  95. <u-picker title="政治面貌" keyName="name" :show="politicsShow" @confirm="politicsConfirm" :columns="politicslist"
  96. @cancel='close()'></u-picker>
  97. <u-picker title="婚姻状态" keyName="name" :show="maritalShow" @confirm="maritalConfirm" :columns="maritallist"
  98. @cancel='close()'>
  99. </u-picker><u-picker title="求职状态" keyName="name" :show="jobShow" @confirm="jobConfirm" :columns="joblist"
  100. @cancel='close()'></u-picker>
  101. <u-datetime-picker ref="picker" title="出生日期" :minDate="minDate" @confirm="birthdayConfirm" :show="birthdayShow"
  102. mode="date" @cancel='close()'></u-datetime-picker>
  103. <u-datetime-picker ref="pickers" title="参加工作时间" :minDate="minDate1" @confirm="workConfirm" :show="workShow"
  104. mode="date" @cancel='close()'></u-datetime-picker>
  105. <u-picker ref="uPicker" keyName="name" title="户口所在地" :defaultIndex="indexs" :show="cityShow" :columns="cityList"
  106. @confirm="cityconfirm" @cancel="cityShow = false" @change="changeHandler"></u-picker>
  107. </view>
  108. </template>
  109. <script>
  110. import fuxing from "../common/fuxing.js"
  111. import {
  112. politics,
  113. marital,
  114. getAllArea,
  115. getjob,
  116. profile,
  117. resumeDetail,
  118. update,
  119. index,
  120. } from "@/units/inquire.js"
  121. export default {
  122. data() {
  123. return {
  124. addressData: {
  125. id: "",
  126. province: "",
  127. city: "",
  128. area: "",
  129. detail: "",
  130. userName: "",
  131. phone: "",
  132. isDefault: false
  133. }, //地址数据
  134. province: [], //省数据
  135. city: [], //市数据
  136. area: [], //区数据
  137. provinceid: "", //省数据
  138. cityid: "", //市数据
  139. areaid: "", //区数据
  140. indexs: [], //默认地区下标
  141. //选择器状态
  142. sexShow: false, //性别
  143. birthdayShow: false, //出生年月
  144. politicsShow: false, //政治面貌
  145. maritalShow: false, //婚姻状态
  146. workShow: false, //工作时间
  147. cityShow: false, //户口所在地
  148. jobShow: false, //工作显示
  149. // 列表数据
  150. sexvalue: "", //性别传的值
  151. status: "", //婚姻状态
  152. politics: "", //政治面貌
  153. city1: "", //地址
  154. job: "",
  155. avatar: "", //头像
  156. job_name: "",
  157. from: {
  158. name: "",
  159. sex: "",
  160. birthday: "",
  161. // industry_id: "", //行业id
  162. province_id: "", //省份id
  163. city_id: "", //城市id
  164. // invitation_code: "", //邀请码
  165. job_role: "student", //求职身份
  166. job_time: "", //参加工作时间
  167. mobile: "", //手机号
  168. domicile_province_id: "", //户籍省份
  169. domicile_city_id: "", //市
  170. political_status_id: "", //政治面貌
  171. marital_status_id: "", //婚姻状态
  172. job_status_id: "", //求职
  173. email: "", //邮箱
  174. source_id: 43,
  175. source_type: "resume",
  176. },
  177. minDate: "",
  178. minDate1: "",
  179. height: '',
  180. list: ['学生', '职场人'],
  181. current: 0,
  182. sexdata: [
  183. ['男', '女', '保密']
  184. ],
  185. politicslist: [
  186. []
  187. ],
  188. maritallist: [
  189. []
  190. ],
  191. cityList: [], //数据地址
  192. cityids: [], //数据地址
  193. joblist: [],
  194. jianliid: ""
  195. }
  196. },
  197. onLoad(option) {
  198. // this.getHeight()
  199. this.jianliid = option.id
  200. console.log(this.jianliid);
  201. this.minDate = Number(new Date('1900-01-01'));
  202. this.minDate1 = Number(new Date('1980-01-01'));
  203. this.getpolitics()
  204. this.getmarital()
  205. this.AllArea()
  206. this.getJob()
  207. this.resumeDetail()
  208. },
  209. methods: {
  210. tochangename() {
  211. uni.navigateTo({
  212. url: "/pagesD/change-name?name=" + JSON.stringify({
  213. name: this.from.name,
  214. }),
  215. events: {
  216. getname: (res) => {
  217. console.log(res);
  218. if (res.name) {
  219. var name = ''
  220. fuxing.forEach(val => {
  221. if (res.name.indexOf(val) > -1) {
  222. name = name[0] + res.name[1] + (this
  223. .from.sex == 'female' ? '女士' : '先生')
  224. }
  225. if (!name) {
  226. name = res.name[0] + (this.from.sex == 'female' ? '女士' : '先生')
  227. }
  228. })
  229. console.log(name);
  230. this.from.name = name
  231. }
  232. // else {
  233. // var name = ''
  234. // fuxing.forEach(val => {
  235. // if (res.virtual_name.indexOf(val) > -1) {
  236. // name = res.virtual_name[0] + res.virtual_name[1] + (this
  237. // .from.sex == 'female' ? '女士' : '先生')
  238. // }
  239. // })
  240. // if (!name) {
  241. // name = res.virtual_name[0] + (this.from.sex == 'female' ? '女士' : '先生')
  242. // }
  243. // this.from.name = name
  244. // }
  245. // this.from.virtual_name = res.virtual_name
  246. }
  247. }
  248. })
  249. },
  250. resumeDetail() {
  251. index().then(res => {
  252. this.avatar = res.data.group_info.avatar //头像
  253. this.from.name = res.data.group_info.name
  254. this.from.sex = res.data.group_info.sex
  255. this.from.birthday = res.data.group_info.birthday
  256. // this.job_name = res.data.job_experience[0].job_name,
  257. this.from.job_role = res.data.group_info.job_role //求职身份
  258. this.from.job_time = res.data.group_info.job_time //参加工作时间
  259. this.from.mobile = res.data.group_info.mobile //手机号
  260. this.city1 = res.data.group_info.domicile_province + res.data.group_info.domicile_city
  261. this.politics = res.data.group_info.political_status_name //政治面貌
  262. this.status = res.data.group_info.marital_status_name //婚姻状态
  263. this.from.email = res.data.group_info.email //邮箱
  264. this.job = res.data.group_info.job_status_name
  265. this.from.job_status_id = res.data.group_info.job_status_id
  266. this.from.political_status_id = res.data.group_info.political_status_id
  267. this.from.province_id = res.data.group_info.province_id
  268. this.from.city_id = res.data.group_info.city_id
  269. this.from.domicile_city_id = res.data.group_info.domicile_city_id
  270. this.from.domicile_province_id = res.data.group_info.domicile_province_id
  271. this.from.marital_status_id = res.data.group_info.marital_status_id
  272. this.current = {
  273. 'student': 0,
  274. 'employee': 1,
  275. } [this.from.job_role]
  276. })
  277. },
  278. workBtn() {
  279. this.workShow = true
  280. this.$refs.pickers.innerValue = new Date(1672502400000).getTime()
  281. },
  282. // 获取政治面貌
  283. getpolitics() {
  284. politics().then((res) => {
  285. this.politicslist[0] = res.data
  286. })
  287. },
  288. //婚姻状态
  289. getmarital() {
  290. marital().then((res) => {
  291. this.maritallist[0] = res.data
  292. })
  293. },
  294. //获取求职状态
  295. getJob() {
  296. getjob().then((res) => {
  297. this.joblist[0] = res.data
  298. })
  299. },
  300. //所有地区
  301. AllArea() {
  302. getAllArea().then((res) => {
  303. console.log(res);
  304. this.province = res.data.map(t => {
  305. return {
  306. name: t.name,
  307. id: t.id
  308. }
  309. })
  310. console.log("aaa", this.province);
  311. this.city = res.data.map(t => t.children.map(v => {
  312. return {
  313. name: v.name,
  314. id: v.id
  315. }
  316. }))
  317. this.area = res.data.map(t => t.children.map(v => v.children.map(i => {
  318. return {
  319. name: i.name,
  320. id: i.id
  321. }
  322. })))
  323. //默认显示数据
  324. // this.cityList = [
  325. // this.province.map(res => res.name),
  326. // this.city[0].map(res => res.name),
  327. // this.area[0][0].map(res => res.name)
  328. // ]
  329. let a = []
  330. let b = []
  331. let c = []
  332. this.province.map(res => {
  333. a.push({
  334. name: res.name,
  335. id: res.id,
  336. })
  337. })
  338. this.city[0].map(res => {
  339. b.push({
  340. name: res.name,
  341. id: res.id,
  342. })
  343. })
  344. this.area[0][0].map(res => {
  345. c.push({
  346. name: res.name,
  347. id: res.id,
  348. })
  349. })
  350. this.cityList = [a, b, c]
  351. console.log(33, this.cityList);
  352. if (this.addressData.province && this.addressData.city && this.addressData.area) {
  353. //省索引
  354. let pIdx = this.province.findIndex(v => v.name == this.addressData.province);
  355. //根据省索引设置默认市数据
  356. this.columns[1] = this.city[pIdx].map(res => res.name)
  357. //市索引
  358. let cIdx = this.city[pIdx].findIndex(v => v.name == this.addressData.city);
  359. //根据市索引设置默认区数据
  360. this.columns[2] = this.area[pIdx][cIdx].map(res => res.name)
  361. //区索引
  362. let aIdx = this.area[pIdx][cIdx].findIndex(v => v.name == this.addressData.area);
  363. this.indexs = [pIdx, cIdx, aIdx];
  364. // console.log(pIdx, cIdx, aIdx);
  365. console.log(this.indexs);
  366. }
  367. })
  368. },
  369. changeHandler(e) {
  370. const {
  371. columnIndex, //当前改变值的列下标
  372. value,
  373. values, // values为当前变化列的数组内容
  374. indexs, //当前地区值下标
  375. picker = this.$refs.uPicker
  376. } = e
  377. //columnIndex代表第几列,意思是下标为0的列发生变化
  378. if (columnIndex === 0) {
  379. picker.setColumnValues(1, this.city[indexs[0]].map(v => {
  380. return {
  381. name: v.name,
  382. id: v.id
  383. }
  384. }))
  385. picker.setColumnValues(2, this.area[indexs[0]][0].map(v => {
  386. return {
  387. name: v.name,
  388. id: v.id
  389. }
  390. }))
  391. }
  392. if (columnIndex === 1) {
  393. picker.setColumnValues(2, this.area[indexs[0]][indexs[1]].map(v => {
  394. return {
  395. name: v.name,
  396. id: v.id
  397. }
  398. }))
  399. }
  400. },
  401. // 选择器
  402. // 求职身份选择器
  403. sectionChange(index) {
  404. this.current = index;
  405. if (index == 0) {
  406. this.from.job_role = "student"
  407. } else {
  408. this.from.job_role = "employee"
  409. }
  410. },
  411. //性别选择器确认
  412. sexConfirm(e) {
  413. if (e.value[0] == '男') {
  414. this.sexvalue = "男",
  415. this.from.sex = "male"
  416. } else if (e.value[0] == "女") {
  417. this.sexvalue = "女",
  418. this.from.sex = "female"
  419. } else {
  420. this.sexvalue = "保密",
  421. this.from.sex = "secret"
  422. }
  423. this.sexShow = false
  424. },
  425. //点击显示时间选择器
  426. birthdayBtn() {
  427. this.birthdayShow = true
  428. //new Date(this.endDate).getTime()为你需要在选择器上显示的时间戳
  429. this.$refs.picker.innerValue = new Date(946656000000).getTime()
  430. },
  431. //出生日期选择器
  432. async birthdayConfirm(e) {
  433. const timeFormat = uni.$u.timeFormat;
  434. let timeValue = await timeFormat(e.value, 'yyyy-mm-dd');
  435. this.from.birthday = timeValue;
  436. this.birthdayShow = false
  437. },
  438. //政治面貌
  439. politicsConfirm(e) {
  440. this.from.political_status_id = e.value[0].id
  441. this.politics = e.value[0].name
  442. this.politicsShow = false;
  443. },
  444. //婚姻状态
  445. maritalConfirm(e) {
  446. this.from.marital_status_id = e.value[0].id
  447. this.status = e.value[0].name
  448. this.maritalShow = false
  449. },
  450. //参加工作时间
  451. async workConfirm(e) {
  452. const timeFormat = uni.$u.timeFormat;
  453. let timeValue = await timeFormat(e.value, 'yyyy-mm-dd');
  454. this.from.job_time = timeValue;
  455. this.workShow = false
  456. },
  457. //户口地址
  458. cityconfirm(e) {
  459. let a = e.value[0].name + e.value[1].name + e.value[2].name
  460. let ids = String(e.value[0].id) + String(e.value[1].id) + String(e.value[2].id)
  461. this.from.domicile_city_id = e.value[1].id
  462. this.from.domicile_province_id = e.value[0].id
  463. // this.city1 = e.value.join("")
  464. this.city1 = a
  465. this.cityShow = false
  466. },
  467. jobConfirm(e) {
  468. this.job = e.value[0].name
  469. this.from.job_status_id = e.value[0].id
  470. this.jobShow = false
  471. },
  472. tishi() {
  473. this.$u.toast('请前往账号设置中修改')
  474. },
  475. //关闭模态框
  476. close() {
  477. this.sexShow = false;
  478. this.birthdayShow = false;
  479. this.politicsShow = false;
  480. this.maritalShow = false
  481. this.workShow = false
  482. this.cityShow = false
  483. this.jobShow = false
  484. },
  485. next() {
  486. if (!this.from.name) {
  487. this.$u.toast("请填写姓名")
  488. return
  489. }
  490. if (!this.from.sex) {
  491. this.$u.toast("请选择性别")
  492. return
  493. }
  494. if (!this.from.birthday) {
  495. this.$u.toast("请选择出生年月")
  496. return
  497. }
  498. if (!this.city1) {
  499. this.$u.toast("请选择户口所在地")
  500. return
  501. }
  502. if (!this.job) {
  503. this.$u.toast("请选择当前求职状态")
  504. return
  505. }
  506. if (!this.from.job_time) {
  507. this.$u.toast("请选择工作时间")
  508. return
  509. }
  510. if (!this.$u.test.mobile(this.from.mobile)) {
  511. this.$u.toast("请输入正确的手机号")
  512. return
  513. }
  514. if (!this.$u.test.email(this.from.email)) {
  515. this.$u.toast("请输入正确的邮箱号")
  516. return
  517. }
  518. profile({
  519. ...this.from
  520. }).then(res => {
  521. this.return1()
  522. })
  523. },
  524. return1() {
  525. uni.navigateBack()
  526. },
  527. }
  528. }
  529. </script>
  530. <style lang="scss">
  531. page {
  532. background-color: #F3F3F3;
  533. }
  534. .index-page {
  535. overflow: hidden;
  536. margin-bottom: 60rpx;
  537. .mingpianfont {
  538. height: 50rpx;
  539. font-size: 36rpx;
  540. font-family: PingFangSC-Medium, PingFang SC;
  541. font-weight: 500;
  542. color: #FFFFFF;
  543. line-height: 50rpx;
  544. }
  545. .explain {
  546. margin-top: 24rpx;
  547. width: 528rpx;
  548. height: 36rpx;
  549. font-size: 26rpx;
  550. font-family: PingFangSC-Regular, PingFang SC;
  551. font-weight: 400;
  552. color: #FFFFFF;
  553. line-height: 36rpx;
  554. }
  555. //个人信息
  556. .personal {
  557. width: 750rpx;
  558. background: #FFFFFF;
  559. border-radius: 28rpx 28rpx 0rpx 0rpx;
  560. margin-top: -40rpx;
  561. position: relative;
  562. z-index: 99;
  563. padding: 40rpx 32rpx 0;
  564. margin-bottom: 60rpx;
  565. box-sizing: border-box;
  566. .body-input {
  567. height: 170rpx;
  568. border-bottom: 2rpx solid #F4F4F4;
  569. .input-title {
  570. font-size: 26rpx;
  571. font-family: PingFangSC-Regular, PingFang SC;
  572. font-weight: 400;
  573. color: #666666;
  574. margin-bottom: 20rpx;
  575. margin-top: 30rpx;
  576. box-sizing: border-box;
  577. }
  578. .input-style {
  579. font-size: 32rpx;
  580. font-family: PingFangSC-Regular, PingFang SC;
  581. font-weight: 400;
  582. color: #CACACA;
  583. }
  584. }
  585. .button {
  586. width: 686rpx;
  587. height: 88rpx !important;
  588. background: #0C66C2;
  589. border-radius: 12rpx;
  590. font-size: 32rpx;
  591. font-family: PingFangSC-Medium, PingFang SC;
  592. font-weight: 500;
  593. color: #FFFFFF;
  594. line-height: 88rpx;
  595. margin: 10rpx 0 0rpx 0;
  596. display: flex;
  597. justify-content: center;
  598. }
  599. }
  600. .index-item {
  601. // width: 702rpx;
  602. // background: #FFFFFF;
  603. // border-radius: 20rpx;
  604. // margin: 20rpx auto;
  605. // padding: 0 20rpx 24rpx 10rpx;
  606. .item-down {
  607. text:first-child {
  608. font-size: 22rpx;
  609. font-family: SFPro-Regular, SFPro;
  610. font-weight: 400;
  611. color: #666666;
  612. }
  613. text:last-child {
  614. font-size: 22rpx;
  615. font-family: PingFangSC-Regular, PingFang SC;
  616. font-weight: 400;
  617. color: #666666;
  618. }
  619. }
  620. .item-gongsi {
  621. margin-bottom: 16rpx;
  622. .text2 {
  623. font-size: 24rpx;
  624. font-family: SFPro-Regular, SFPro;
  625. font-weight: 400;
  626. color: #666666;
  627. }
  628. .logo {
  629. width: 42rpx;
  630. height: 42rpx;
  631. border-radius: 10rpx;
  632. margin-right: 16rpx;
  633. }
  634. .text1 {
  635. max-width: 192rpx;
  636. font-size: 24rpx;
  637. font-family: PingFangSC-Regular, PingFang SC;
  638. font-weight: 400;
  639. color: #444444;
  640. margin-right: 12rpx;
  641. }
  642. }
  643. .item-label {
  644. margin-bottom: 20rpx;
  645. text {
  646. margin-right: 16rpx;
  647. line-height: 46rpx;
  648. background: #F7F7F7;
  649. border-radius: 4rpx;
  650. padding: 0 14rpx;
  651. font-size: 24rpx;
  652. font-family: PingFangSC-Regular, PingFang SC;
  653. font-weight: 400;
  654. color: #5F5F5F;
  655. }
  656. }
  657. .item-top {
  658. height: 88rpx;
  659. .text1 {
  660. font-size: 32rpx;
  661. font-family: PingFangSC-Medium, PingFang SC;
  662. font-weight: 500;
  663. color: #222222;
  664. margin-right: 16rpx;
  665. }
  666. .text2 {
  667. width: 50rpx;
  668. line-height: 32rpx;
  669. background: rgba(255, 83, 53, 0.1);
  670. border-radius: 4rpx;
  671. text-align: center;
  672. font-size: 20rpx;
  673. font-family: PingFangSC-Regular, PingFang SC;
  674. font-weight: 400;
  675. color: #FF5335;
  676. margin-right: 12rpx;
  677. }
  678. .text3 {
  679. width: 90rpx;
  680. line-height: 32rpx;
  681. background: #FFF2E8;
  682. border-radius: 4rpx;
  683. text-align: center;
  684. font-size: 20rpx;
  685. font-family: PingFangSC-Regular, PingFang SC;
  686. font-weight: 400;
  687. color: #FF8620;
  688. margin-right: 12rpx;
  689. }
  690. .text4 {
  691. line-height: 32rpx;
  692. background: #E6EFF8;
  693. border-radius: 4rpx;
  694. padding: 0 4rpx;
  695. text-align: center;
  696. font-size: 20rpx;
  697. font-family: SFPro-Regular, SFPro;
  698. font-weight: 400;
  699. color: #0C66C2;
  700. }
  701. .text5 {
  702. font-size: 32rpx;
  703. font-family: JDZhengHT-Regular, JDZhengHT;
  704. font-weight: 400;
  705. color: #0C66C2;
  706. }
  707. }
  708. }
  709. .index-navbar {
  710. position: sticky;
  711. top: 0;
  712. left: 0;
  713. width: 750rpx;
  714. z-index: 10;
  715. .header-down {
  716. height: 92rpx;
  717. padding: 20rpx 24rpx;
  718. box-sizing: border-box;
  719. .font {
  720. font-size: 40rpx;
  721. font-family: PingFangSC-Medium, PingFang SC;
  722. font-weight: 500;
  723. color: #222222;
  724. }
  725. .right-item {
  726. padding: 0 16rpx;
  727. height: 52rpx;
  728. background: #F3F3F3;
  729. border-radius: 4rpx;
  730. margin-left: 20rpx;
  731. .text {
  732. margin-right: 4rpx;
  733. font-size: 26rpx;
  734. font-family: PingFangSC-Regular, PingFang SC;
  735. font-weight: 400;
  736. color: #666666;
  737. }
  738. }
  739. .down-left {
  740. .text {
  741. margin-right: 4rpx;
  742. font-size: 26rpx;
  743. font-family: PingFangSC-Medium, PingFang SC;
  744. font-weight: 500;
  745. color: #222222;
  746. }
  747. }
  748. }
  749. .index-bg {
  750. position: absolute;
  751. top: 0;
  752. left: 0;
  753. z-index: -1;
  754. width: 750rpx;
  755. height: 392rpx;
  756. }
  757. }
  758. .index-header {
  759. flex: 1;
  760. padding: 0 32rpx;
  761. height: 50rpx;
  762. .index-search {
  763. width: 200rpx;
  764. height: 64rpx;
  765. background: #FFFFFF;
  766. border-radius: 20rpx;
  767. padding: 0 28rpx;
  768. .text1 {
  769. font-size: 24rpx;
  770. font-family: PingFangSC-Regular, PingFang SC;
  771. font-weight: 400;
  772. color: #999999;
  773. margin-left: 16rpx;
  774. }
  775. }
  776. .index-tabs {
  777. text:first-child {
  778. font-size: 36rpx;
  779. font-family: PingFangSC-Medium, PingFang SC;
  780. font-weight: 500;
  781. color: #222222;
  782. }
  783. text:last-child {
  784. width: 76rpx;
  785. height: 12rpx;
  786. background: linear-gradient(270deg, #208EFF 0%, rgba(28, 159, 227, 0) 100%);
  787. margin-top: -20rpx;
  788. border-radius: 100rpx;
  789. }
  790. }
  791. }
  792. }
  793. ::v-deep .u-navbar__content__left {
  794. padding: 0 !important;
  795. }
  796. ::v-deep .u-subsection {
  797. width: 312rpx !important;
  798. }
  799. ::v-deep .u-input--square {
  800. background-color: #fff !important;
  801. }
  802. </style>