incidentList.vue 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921
  1. <template>
  2. <div class="bgColor">
  3. <div slot="content" class="scroll-wrapper">
  4. <div class="demo">
  5. <div class="header">事件列表</div>
  6. <div class="stateSearchWrap">
  7. <cube-select
  8. class="stateSearch"
  9. v-model="searchType"
  10. :options="searchsType"
  11. @change="typeChange()"
  12. ></cube-select>
  13. <cube-select
  14. class="stateSearch"
  15. v-model="searchState"
  16. :options="searchsState"
  17. @change="typeChange()"
  18. ></cube-select>
  19. </div>
  20. <div class="scroll-list-wrap">
  21. <cube-scroll
  22. ref="scroll"
  23. :data="items"
  24. :options="options"
  25. @pulling-down="onPullingDown"
  26. @pulling-up="onPullingUp"
  27. >
  28. <div class="conentBox" v-if="!loadShow && items.length">
  29. <div
  30. class="conent"
  31. v-for="item in items"
  32. :key="item.id"
  33. @click="toIncidentDetails(item)"
  34. >
  35. <div class="head">
  36. <p>
  37. <i class="iconfont icon-zuixinbaoxiu newPapir"></i>
  38. 事件编号:{{ item.incidentsign }}
  39. <span
  40. :class="{
  41. btn: true,
  42. daipingjia: item.state.name == '待评价',
  43. daijiedan:
  44. item.state.name == '待接单' &&
  45. item.handlerUser &&
  46. !item.candidateGroups,
  47. daiqiangdan:
  48. item.state.name == '待接单' &&
  49. !item.handlerUser &&
  50. item.candidateGroups,
  51. chulizhong: item.state.name == '处理中',
  52. yijiejue: item.state.name == '已解决',
  53. yiguanbi: item.state.name == '已关闭',
  54. chongxinzhipai: item.state.name == '重新指派'
  55. }"
  56. >{{
  57. item.state.name == "待接单"
  58. ? item.handlerUser && !item.candidateGroups
  59. ? "待接单"
  60. : "待抢单"
  61. : item.state.name
  62. }}</span
  63. >
  64. </p>
  65. </div>
  66. <div class="center">
  67. <p class="desc">
  68. <span class="fl">事件描述:</span>
  69. <span
  70. class="grayFont overflowEllipsis2"
  71. v-html="item.description"
  72. ></span>
  73. </p>
  74. <p>
  75. 报修<span>{{ valConfig == 1 ? "人" : "科室" }}</span> :
  76. <span class="grayFont">{{ item.contacts }}</span>
  77. <span @click.stop v-if="item.contactsInformation"
  78. ><a :href="'tel:' + item.contactsInformation"
  79. >(<i class="iconfont icon-shouji"></i
  80. >{{ item.contactsInformation }})</a
  81. ></span
  82. >
  83. </p>
  84. </div>
  85. <div class="bottom">
  86. <span v-if="!item.place"></span>
  87. <span
  88. v-if="item.place"
  89. style="width:70%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
  90. >{{ item.place.area.area }} {{ item.place.place }}
  91. {{ item.houseNumber }}</span
  92. >
  93. <span>{{ item.acceptDate | timeFormat("MM-dd HH:mm") }}</span>
  94. </div>
  95. <div class="btns">
  96. <cube-form-group
  97. class="sub-btn"
  98. v-show="
  99. (item.state.id === 1544 || item.state.id === 1543) &&
  100. isAssign &&
  101. item.assignee
  102. "
  103. >
  104. <cube-button @click.stop="assign(item)">指派</cube-button>
  105. </cube-form-group>
  106. <cube-form-group
  107. class="sub-btn"
  108. v-show="item.state.id === 1544"
  109. >
  110. <cube-button @click.stop="addHandlerLog(item)"
  111. >新增处理日志</cube-button
  112. >
  113. </cube-form-group>
  114. </div>
  115. </div>
  116. </div>
  117. <template slot="pulldown" slot-scope="props">
  118. <div
  119. v-if="props.pullDownRefreshObj"
  120. class="cube-pulldown-wrapper"
  121. :style="props.pullDownStyle"
  122. >
  123. <div
  124. v-show="props.beforePullDown"
  125. class="before-trigger"
  126. :style="{ paddingTop: props.bubbleY + 'px' }"
  127. >
  128. <span
  129. :class="{
  130. rotate: props.bubbleY > pullDownRefreshThreshold - 80
  131. }"
  132. >↓</span
  133. >
  134. </div>
  135. <div class="after-trigger" v-show="!props.beforePullDown">
  136. <div v-show="props.isPullingDown" class="loading">
  137. <cube-loading></cube-loading>
  138. </div>
  139. <div v-show="!props.isPullingDown" class="text">
  140. <span class="refresh-text">更新成功</span>
  141. </div>
  142. </div>
  143. </div>
  144. </template>
  145. <div class="wushuju" v-if="!loadShow && items.length === 0">
  146. <img src="./../../static/images/wushuju.svg" alt />
  147. <p>暂无事件</p>
  148. </div>
  149. </cube-scroll>
  150. </div>
  151. </div>
  152. </div>
  153. <load-ing v-show="loadShow"></load-ing>
  154. <!-- 指派弹窗 -->
  155. <showModel
  156. v-if="models.disjunctor"
  157. :title="models.title"
  158. :icon="models.icon"
  159. :disjunctor="models.disjunctor"
  160. @ok="ok"
  161. @cancel="cancel"
  162. :operate="models.operate"
  163. selectName="user"
  164. ></showModel>
  165. <!-- 新增处理日志弹窗 -->
  166. <showModel
  167. :title="models1.title"
  168. :icon="models1.icon"
  169. :disjunctor="models1.disjunctor"
  170. @ok="ok1"
  171. @cancel="cancel1"
  172. :operate="models1.operate"
  173. textName="textarea"
  174. ></showModel>
  175. </div>
  176. </template>
  177. <script>
  178. import Vue from "vue";
  179. import showModel from "../components/showModel/showModel.vue";
  180. import CubePage from "../components/cube-page.vue";
  181. import SwitchOption from "../components/switch-option";
  182. import InputOption from "../components/input-option";
  183. import SelectOption from "../components/select-option";
  184. import { formatDate } from "./../components/js/date.js";
  185. import LoadIng from "./../views/loading.vue";
  186. export default {
  187. data() {
  188. return {
  189. modelsData: null, //点击弹窗的那一项数据
  190. modelsData1: null, //点击弹窗的那一项数据
  191. // 弹窗model
  192. models: {
  193. disjunctor: false
  194. },
  195. models1: {
  196. disjunctor: false
  197. },
  198. isAssign: false, //是否有权限指派
  199. isAll: false, //是否显示全部事件
  200. loginUser: JSON.parse(localStorage.getItem("loginUser")),
  201. valConfig: JSON.parse(localStorage.getItem("valConfig")) - 0, //报修主体
  202. items: [],
  203. pullDownRefresh: true,
  204. pullDownRefreshThreshold: 60,
  205. pullDownRefreshStop: 40,
  206. pullDownRefreshTxt: "更新成功",
  207. pullUpLoad: true,
  208. pullUpLoadThreshold: 0,
  209. pullUpLoadMoreTxt: "加载更多",
  210. pullUpLoadNoMoreTxt: "没有更多数据",
  211. customPullDown: true,
  212. candidateGroups: "",
  213. searchsType: [
  214. {
  215. text: "待我处理",
  216. value: "todo"
  217. },
  218. {
  219. text: "与我关联",
  220. value: "done"
  221. }
  222. // {
  223. // text: "我创建",
  224. // value: "create"
  225. // }
  226. ],
  227. searchsState:[],//状态列表
  228. searchType: "all",
  229. searchState: 0,
  230. type: "all",
  231. isToday: "",
  232. sum: 10,
  233. idx: 0,
  234. stateClass: "",
  235. loadShow: true
  236. };
  237. },
  238. components: {
  239. CubePage,
  240. SwitchOption,
  241. InputOption,
  242. SelectOption,
  243. LoadIng,
  244. showModel
  245. },
  246. computed: {
  247. options() {
  248. return {
  249. pullDownRefresh: this.pullDownRefreshObj,
  250. pullUpLoad: this.pullUpLoadObj,
  251. scrollbar: true
  252. };
  253. },
  254. pullDownRefreshObj: function() {
  255. return this.pullDownRefresh
  256. ? {
  257. threshold: parseInt(this.pullDownRefreshThreshold),
  258. txt: this.pullDownRefreshTxt
  259. }
  260. : false;
  261. },
  262. pullUpLoadObj: function() {
  263. return this.pullUpLoad
  264. ? {
  265. threshold: parseInt(this.pullUpLoadThreshold),
  266. txt: {
  267. more: this.pullUpLoadMoreTxt,
  268. noMore: this.pullUpLoadNoMoreTxt
  269. }
  270. }
  271. : false;
  272. }
  273. },
  274. methods: {
  275. //确定
  276. ok(selectUserId) {
  277. console.log(selectUserId);
  278. if (!selectUserId) {
  279. this.$createDialog({
  280. type: "alert",
  281. title: "请选择指派对象",
  282. icon: "cubeic-warn"
  283. }).show();
  284. return;
  285. }
  286. const toast = this.$createToast({
  287. txt: "Loading...",
  288. mask: true
  289. });
  290. toast.show();
  291. this.$http
  292. .post("service/bpm/bpm/delegateTask/" + this.modelsData.taskId, {
  293. assginee: selectUserId
  294. })
  295. .then(res => {
  296. toast.hide();
  297. this.models.disjunctor = false;
  298. if (res.status == 200) {
  299. this.$createDialog({
  300. type: "alert",
  301. title: "操作成功",
  302. icon: "cubeic-right",
  303. onConfirm: (e, promptValue) => {
  304. this.loadShow = true;
  305. this.items = [];
  306. this.idx = 0;
  307. this.getData();
  308. }
  309. }).show();
  310. } else {
  311. this.$createDialog({
  312. type: "alert",
  313. title: "系统错误,请稍后再试!",
  314. icon: "cubeic-wrong",
  315. onConfirm: (e, promptValue) => {
  316. this.loadShow = true;
  317. this.items = [];
  318. this.idx = 0;
  319. this.getData();
  320. }
  321. }).show();
  322. }
  323. });
  324. },
  325. //取消
  326. cancel() {
  327. this.models.disjunctor = false;
  328. },
  329. // 指派
  330. assign(item) {
  331. this.modelsData = item;
  332. this.models = {
  333. disjunctor: true,
  334. title: "指派对象",
  335. icon: "warn",
  336. operate: {
  337. ok: "确定",
  338. cancel: "取消"
  339. }
  340. };
  341. },
  342. //确定
  343. ok1(text) {
  344. console.log(text);
  345. if (!text.trim()) {
  346. this.$createDialog({
  347. type: "alert",
  348. title: "请填写处理日志",
  349. icon: "cubeic-warn"
  350. }).show();
  351. return;
  352. }
  353. const toast = this.$createToast({
  354. txt: "Loading...",
  355. mask: true
  356. });
  357. toast.show();
  358. this.$http
  359. .post("service/bpm/data/addData/operationLog", {
  360. operationLog: {
  361. opType: "handlerLog",
  362. opValue: text,
  363. extra1: this.modelsData1.id
  364. }
  365. })
  366. .then(res => {
  367. toast.hide();
  368. this.models1.disjunctor = false;
  369. if (res.status == 200) {
  370. this.$createDialog({
  371. type: "alert",
  372. title: "操作成功",
  373. icon: "cubeic-right",
  374. onConfirm: (e, promptValue) => {
  375. this.loadShow = true;
  376. this.items = [];
  377. this.idx = 0;
  378. this.getData();
  379. }
  380. }).show();
  381. } else {
  382. this.$createDialog({
  383. type: "alert",
  384. title: "系统错误,请稍后再试!",
  385. icon: "cubeic-wrong",
  386. onConfirm: (e, promptValue) => {
  387. this.loadShow = true;
  388. this.items = [];
  389. this.idx = 0;
  390. this.getData();
  391. }
  392. }).show();
  393. }
  394. });
  395. },
  396. //取消
  397. cancel1() {
  398. this.models1.disjunctor = false;
  399. },
  400. // 新增处理日志
  401. addHandlerLog(item) {
  402. this.modelsData1 = item;
  403. this.models1 = {
  404. disjunctor: true,
  405. title: "新增处理日志",
  406. icon: "warn",
  407. operate: {
  408. ok: "确定",
  409. cancel: "取消"
  410. }
  411. };
  412. },
  413. getParamsState() {
  414. if (this.$route.params.type) {
  415. this.type = this.$route.params.type;
  416. this.isToday = this.$route.params.isToday;
  417. if (this.type === "todo") {
  418. this.searchType = "todo";
  419. } else if (this.type === "done") {
  420. this.searchType = "done";
  421. } else {
  422. this.searchType = "all";
  423. }
  424. }
  425. },
  426. typeChange() {
  427. this.loadShow = true;
  428. this.items = [];
  429. this.idx = 0;
  430. this.sum = 10;
  431. this.getData();
  432. },
  433. toIncidentDetails(data) {
  434. console.log(1111111);
  435. console.log(data);
  436. var name = "";
  437. if (data.state.value == "pending") {
  438. if (data.handlerUser && !data.candidateGroups) {
  439. // 指派给人 接单
  440. name = "Order";
  441. } else if (data.candidateGroups && !data.handlerUser) {
  442. // 指派给组 抢单
  443. name = "GrabSheet";
  444. }
  445. } else if (data.state.value == "reassign") {
  446. name = "AgainAssign";
  447. } else if (data.state.value == "handler") {
  448. name = "Processing";
  449. } else if (data.state.value == "resolved") {
  450. name = "Solved";
  451. } else if (data.state.value == "close") {
  452. name = "Closed";
  453. }
  454. this.$router.push({
  455. name: name,
  456. params: {
  457. data: data
  458. }
  459. });
  460. },
  461. getData() {
  462. let postData = {
  463. assignee: this.loginUser.id,
  464. candidateGroups: this.candidateGroups,
  465. searchType: this.searchType,
  466. idx: this.idx,
  467. sum: this.sum,
  468. incident: { temporary: true,statusId:this.searchState?this.searchState:undefined }
  469. };
  470. if (this.isToday == "today") {
  471. postData.incident.acceptDate =
  472. formatDate(new Date(), "yyyy-MM-dd") + " 00:00:00";
  473. postData.incident.acceptDateEnd =
  474. formatDate(new Date(), "yyyy-MM-dd") + " 23:59:59";
  475. }
  476. if(this.searchType === 'all'){
  477. // 全部事件
  478. if(this.loginUser.duty){
  479. // 当前的所属责任科室
  480. postData.incident.duty = this.loginUser.duty;
  481. }else if(this.loginUser.branch){
  482. // 当前的所属院区
  483. postData.incident.branch = this.loginUser.branch.id;
  484. }
  485. this.$http
  486. .post("service/user/data/fetchDataList/incident", postData)
  487. .then((res) => {
  488. if (res.data.list.length > 0) {
  489. for (var i = 0; i < res.data.list.length; i++) {
  490. res.data.list[i].createTime = formatDate(
  491. new Date(res.data.list[i].createTime),
  492. "yyyy-MM-dd hh:mm"
  493. );
  494. }
  495. if (this.idx) {
  496. this.items = this.items.concat(res.data.list);
  497. } else {
  498. this.items = res.data.list;
  499. }
  500. } else {
  501. this.pullUpLoad = false;
  502. }
  503. this.loadShow = false;
  504. });
  505. }else{
  506. this.$http
  507. .post("service/bpm/bpm/fetchTask/bpm_incident", postData)
  508. .then((res) => {
  509. if (res.data.data.length > 0) {
  510. for (var i = 0; i < res.data.data.length; i++) {
  511. res.data.data[i].createTime = formatDate(
  512. new Date(res.data.data[i].createTime),
  513. "yyyy-MM-dd hh:mm"
  514. );
  515. }
  516. if (this.idx) {
  517. this.items = this.items.concat(res.data.data);
  518. } else {
  519. this.items = res.data.data;
  520. }
  521. } else {
  522. this.pullUpLoad = false;
  523. }
  524. this.loadShow = false;
  525. });
  526. }
  527. },
  528. onPullingDown() {
  529. var that = this;
  530. that.idx = 0;
  531. that.sum = 10;
  532. setTimeout(() => {
  533. that.getData();
  534. }, 1000);
  535. },
  536. onPullingUp() {
  537. var that = this;
  538. that.idx = that.idx + 1;
  539. that.getData();
  540. },
  541. updatePullDownRefresh(val) {
  542. this.pullDownRefresh = val;
  543. },
  544. updatePullDownRefreshThreshold(val) {
  545. this.pullDownRefreshThreshold = val;
  546. },
  547. updatePullDownRefreshTxt(val) {
  548. this.pullDownRefreshTxt = val;
  549. },
  550. updatePullUpLoad(val) {
  551. this.pullUpLoad = val;
  552. },
  553. updatePullUpLoadThreshold(val) {
  554. this.pullUpLoadThreshold = val;
  555. },
  556. updatePullUpLoadMoreTxt(val) {
  557. this.pullUpLoadMoreTxt = val;
  558. },
  559. updatePullUpLoadNoMoreTxt(val) {
  560. this.pullUpLoadNoMoreTxt = val;
  561. },
  562. updateCustomPullDown(val) {
  563. this.customPullDown = val;
  564. },
  565. rebuildScroll() {
  566. Vue.nextTick(() => {
  567. this.$refs.scroll.destroy();
  568. this.$refs.scroll.initScroll();
  569. });
  570. },
  571. // 获取事件状态
  572. getStateList(){
  573. this.$http
  574. .post("service/common/common/getDictionary", {"type":"list","key":"incident_status"})
  575. .then((res) => {
  576. this.searchsState = [{text:'全部',value:0},...res.data.map(v=>({text:v.name,value:v.id}))]
  577. });
  578. }
  579. },
  580. created() {
  581. var that = this;
  582. let menu = JSON.parse(localStorage.getItem("menu"));
  583. if (menu) {
  584. this.isAssign = menu.some(v => v.link == "shijianliebiao_assign");
  585. this.isAll = menu.some(v => v.link == "shijianliebiao_all");
  586. if(this.isAll){
  587. this.searchsType.unshift({
  588. text: "全部事件",
  589. value: "all"
  590. })
  591. }
  592. }
  593. that.loginUser.group.forEach(element => {
  594. that.candidateGroups += element.id + ",";
  595. });
  596. that.candidateGroups = that.candidateGroups.substring(
  597. 0,
  598. that.candidateGroups.length - 1
  599. );
  600. this.getParamsState();
  601. this.loadShow = true;
  602. this.getData();
  603. this.getStateList();
  604. localStorage.removeItem("modelData");
  605. // localStorage.removeItem("category");
  606. // localStorage.removeItem("categoryVal");
  607. localStorage.removeItem("referenceInfo");
  608. localStorage.removeItem("order");
  609. localStorage.removeItem("model");
  610. // localStorage.removeItem("selectedCategoryTxt");
  611. }
  612. };
  613. </script>
  614. <style lang="stylus" rel="stylesheet/stylus" scoped>
  615. .btns{
  616. display: flex;
  617. justify-content: space-between
  618. .sub-btn {
  619. margin:0 2px;
  620. flex:1;
  621. background: #ececec;
  622. .cube-btn {
  623. background-color: #005395 !important;
  624. border-radius: 8px
  625. }
  626. }
  627. }
  628. .scroll-list-wrap {
  629. height: calc(100vh - 2.72rem);
  630. border-radius: 5px;
  631. transform: rotate(0deg); // fix 子元素超出边框圆角部分不隐藏的问题
  632. overflow: hidden;
  633. padding-top: 1.76rem;
  634. }
  635. .foods-wrapper {
  636. .food-item {
  637. display: flex;
  638. /* padding: 18px */
  639. /* border-bottom: 1px solid rgba(7, 17, 27, 0.1) */
  640. /* border-top: 1px solid rgba(7, 17, 27, 0.1)!important */
  641. &:last-child {
  642. border-none();
  643. margin-bottom: 0;
  644. }
  645. .icon {
  646. flex: 0 0 57px;
  647. margin-right: 10px;
  648. }
  649. .food-content {
  650. flex: 1;
  651. .name {
  652. margin: 2px 0 8px 0;
  653. height: 14px;
  654. line-height: 14px;
  655. font-size: 14px;
  656. color: rgb(7, 17, 27);
  657. }
  658. .description, .extra {
  659. line-height: 10px;
  660. font-size: 10px;
  661. color: rgb(147, 153, 159);
  662. }
  663. .description {
  664. line-height: 12px;
  665. margin-bottom: 8px;
  666. }
  667. .extra {
  668. .count {
  669. margin-right: 12px;
  670. }
  671. }
  672. .price {
  673. font-weight: 700;
  674. line-height: 24px;
  675. .now {
  676. margin-right: 8px;
  677. font-size: 14px;
  678. color: rgb(240, 20, 20);
  679. }
  680. .old {
  681. text-decoration: line-through;
  682. font-size: 10px;
  683. color: rgb(147, 153, 159);
  684. }
  685. }
  686. .cartcontrol-wrapper {
  687. position: absolute;
  688. right: 0;
  689. bottom: 12px;
  690. .scroll-wrapper {
  691. .cube-pulldown-wrapper {
  692. .before-trigger {
  693. font-size: 30px;
  694. line-height: 30px;
  695. align-self: flex-end;
  696. span {
  697. display: inline-block;
  698. transition: all 0.3s;
  699. color: #666;
  700. &.rotate {
  701. transform: rotate(180deg);
  702. }
  703. }
  704. }
  705. .after-trigger {
  706. .refresh-text {
  707. color: grey;
  708. }
  709. }
  710. }
  711. }
  712. }
  713. }
  714. }
  715. }
  716. </style>
  717. <style lang="less" scoped>
  718. .cont {
  719. margin-top: 1.86rem;
  720. }
  721. .scroll-list-wrap {
  722. padding-top: 1.76rem;
  723. }
  724. .header {
  725. width: 100%;
  726. height: 0.88rem;
  727. line-height: 0.88rem;
  728. text-align: center;
  729. color: #fff;
  730. font-size: 0.37rem;
  731. background: linear-gradient(#2e2f32, #414246);
  732. position: fixed;
  733. top: 0;
  734. z-index: 6;
  735. }
  736. .stateSearchWrap{
  737. width: 100%;
  738. position: fixed;
  739. top: 0.88rem;
  740. z-index: 6;
  741. display: flex;
  742. .stateSearch {
  743. flex: 1;
  744. }
  745. }
  746. .bgColor {
  747. background-color: white;
  748. }
  749. .food-item {
  750. border-top: 0.16rem rgb(238, 238, 238) solid;
  751. }
  752. .food-content {
  753. border-top: 0.01rem rgb(223, 222, 222) solid;
  754. border-bottom: 0.01rem rgb(223, 222, 222) solid;
  755. }
  756. .cube-select {
  757. height: 0.88rem;
  758. line-height: 0.88rem;
  759. padding: 0 0.24rem;
  760. font-size: 0.36rem;
  761. color: #333333;
  762. border-bottom: 0.08rem solid #e5e5e5;
  763. }
  764. .title {
  765. display: flex;
  766. justify-content: space-between;
  767. height: 0.7rem;
  768. line-height: 0.7rem;
  769. border-top: 0.01rem rgb(223, 222, 222) solid;
  770. padding: 0 0.24rem;
  771. border-bottom: 0.01rem rgb(223, 222, 222) solid;
  772. }
  773. .title i {
  774. font-size: 0.32rem;
  775. color: #005395;
  776. }
  777. .title div:nth-child(1) {
  778. font-size: 0.32rem;
  779. }
  780. .title div:nth-child(1) span {
  781. display: inline-block;
  782. margin-left: 0.08rem;
  783. }
  784. .title div:nth-child(2) {
  785. padding: 0.05rem 0.3rem;
  786. /* border: 0.01rem rgb(0,0,255) solid; */
  787. border-radius: 16px;
  788. /* color: rgb(0,0,255); */
  789. height: 0.25rem;
  790. line-height: 0.25rem;
  791. margin-top: 0.15rem;
  792. font-size: 0.24rem;
  793. }
  794. .weishouli {
  795. color: #991f00;
  796. border: 0.01rem #991f00 solid;
  797. background-color: #f4e8e5;
  798. }
  799. .bushouli {
  800. color: #666666;
  801. background-color: #eeeeee;
  802. border: 0.01rem #666666 solid;
  803. }
  804. .chulizhong {
  805. color: #003057;
  806. background-color: #e5eaee;
  807. border: 0.01rem #003057 solid;
  808. }
  809. .daipingjia {
  810. color: #825b00;
  811. background-color: #f2eee5;
  812. border: 0.01rem #825b00 solid;
  813. }
  814. .yijiejue {
  815. color: #40a19c;
  816. background-color: #ebf5f5;
  817. border: 0.01rem #40a19c solid;
  818. }
  819. .yichehui {
  820. color: #48a843;
  821. background-color: #ecf6ec;
  822. border: 0.01rem #48a843 solid;
  823. }
  824. // .conent {
  825. // font-size: 0.28rem;
  826. // line-height: 0.39rem;
  827. // overflow: hidden;
  828. // display: -webkit-box;
  829. // -webkit-line-clamp: 2;
  830. // -webkit-box-orient: vertical;
  831. // word-break: break-all;
  832. // padding: 0 0.64rem;
  833. // margin: 0.24rem 0;
  834. // }
  835. .timeBox {
  836. display: flex;
  837. justify-content: space-between;
  838. font-size: 0.24rem;
  839. color: #999999;
  840. border-top: 0.01rem rgb(223, 222, 222) solid;
  841. height: 0.7rem;
  842. line-height: 0.7rem;
  843. padding: 0 0.24rem 0 0.64rem;
  844. }
  845. .wushuju {
  846. margin-top: 2.4rem;
  847. text-align: center;
  848. color: #999;
  849. }
  850. .wushuju img {
  851. width: 5.12rem;
  852. height: 2.84rem;
  853. }
  854. .conentBox {
  855. width: 100%;
  856. height: 100%;
  857. .conent {
  858. font-size: 0.32rem;
  859. font-weight: 400;
  860. line-height: 0.45rem;
  861. border-bottom: 0.16rem solid #e5e5e5;
  862. .head {
  863. border-bottom: 0.01rem solid #e6e6e6;
  864. p {
  865. padding: 0.24rem 0.48rem;
  866. i {
  867. color: #00559d;
  868. }
  869. .btn {
  870. float: right;
  871. }
  872. }
  873. }
  874. .center {
  875. color: #333333;
  876. border-bottom: 0.01rem solid #e6e6e6;
  877. padding: 0.24rem 0.48rem;
  878. p {
  879. &.desc {
  880. overflow: hidden;
  881. max-height: 0.88rem;
  882. }
  883. .grayFont {
  884. overflow-x: scroll;
  885. color: #666;
  886. }
  887. }
  888. }
  889. .bottom {
  890. display: flex;
  891. justify-content: space-between;
  892. align-items: center;
  893. overflow: hidden;
  894. height: 0.86rem;
  895. border-bottom: 0.01rem solid #e6e6e6;
  896. font-size: 0.24rem;
  897. color: #999;
  898. padding: 0 0.24rem 0 0.48rem;
  899. }
  900. }
  901. }
  902. </style>