index.vue 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825
  1. <template>
  2. <div id="addRelation">
  3. <!-- 按钮区域 -->
  4. <div class="text-right">
  5. <el-switch @change="changeType" v-model="isSwitch"></el-switch>AI辅助
  6. <el-button size="medium" @click="showHistory" class="ani-his-plus">
  7. 本次对应记录{{num}}
  8. <span v-if="showPlus" :class="{'plusOne':true,'startAni':showPlus}">+1</span>
  9. </el-button>
  10. </div>
  11. <!-- tab页区域 -->
  12. <el-tabs v-model="curType">
  13. <el-tab-pane
  14. v-for="(item) in typeList"
  15. :key="item.name"
  16. :label="item.title"
  17. :name="item.name"
  18. ></el-tab-pane>
  19. </el-tabs>
  20. <!-- 数据字典设备类型 -->
  21. <el-form>
  22. <el-form-item label="数据字典设备类型">
  23. <el-select v-model="form.source" multiple collapse-tags placeholder="全部" filterable>
  24. <el-option
  25. v-for="item in options"
  26. :key="item.value"
  27. :label="item.label"
  28. :value="item.value"
  29. ></el-option>
  30. </el-select>
  31. </el-form-item>
  32. </el-form>
  33. <!-- 列表及查询条件区域 -->
  34. <div class="table-container clearfix">
  35. <div class="left-table">
  36. <h5>未对应的设备标识</h5>
  37. <!-- 查询条件 -->
  38. <div class="query-box clearfix">
  39. <div class="query-item">
  40. <label>设备标识关键字</label>
  41. <el-input placeholder="请输入设备标识关键字" v-model="form.keywords" class="input-with-select">
  42. <el-button slot="append" icon="el-icon-search"></el-button>
  43. </el-input>
  44. </div>
  45. <div class="query-item">
  46. <label>数据源</label>
  47. <el-select v-model="form.source" multiple collapse-tags placeholder="全部" filterable>
  48. <el-option
  49. v-for="item in options"
  50. :key="item.value"
  51. :label="item.label"
  52. :value="item.value"
  53. ></el-option>
  54. </el-select>
  55. </div>
  56. <div class="query-item">
  57. <label>位置标签</label>
  58. <el-select v-model="form.position" multiple collapse-tags placeholder="全部" filterable>
  59. <el-option
  60. v-for="item in options"
  61. :key="item.value"
  62. :label="item.label"
  63. :value="item.value"
  64. ></el-option>
  65. </el-select>
  66. </div>
  67. </div>
  68. <!-- 左侧列表 -->
  69. <div class="table-box">
  70. <div class="l-custom-table custom-table" v-loading="lTableLoading">
  71. <div>
  72. <table>
  73. <thead>
  74. <tr>
  75. <td style="width:20%;">数据源</td>
  76. <td style="width:30%;">位置标签</td>
  77. <td class="bgf5" style="width:200px;min-width:200px;">设备标识</td>
  78. <td class="bgf5 special" style="width:30px;min-width:30px;"></td>
  79. </tr>
  80. </thead>
  81. </table>
  82. </div>
  83. <div ref="lTableBody" class="custom-table-body">
  84. <table>
  85. <tbody is="transition-group" name="el-zoom-in-top">
  86. <tr v-for="t in LtableData" :key="t.id">
  87. <td style="width:20%;">
  88. <el-tooltip :content="t.address" placement="top">
  89. <span>{{t.address}}</span>
  90. </el-tooltip>
  91. </td>
  92. <td style="width:30%;">
  93. <el-tooltip :content="t.address" placement="top">
  94. <span>{{t.address}}</span>
  95. </el-tooltip>
  96. </td>
  97. <td class="bgf5" style="width:200px;min-width:200px;">
  98. <el-tooltip :content="t.address" placement="top">
  99. <span>{{t.address}}</span>
  100. </el-tooltip>
  101. </td>
  102. <td class="bgf5 special" style="width:30px;min-width:30px;">
  103. <el-checkbox v-model="t.checked" @change="changeCheck(t.id,'l')"></el-checkbox>
  104. </td>
  105. </tr>
  106. </tbody>
  107. </table>
  108. </div>
  109. </div>
  110. <!-- 智能推荐 -->
  111. <transition name="el-zoom-in-top">
  112. <div class="AIRecom" v-show="leftRecoList.length>0&&leftAI">
  113. <div class="l-title">
  114. 可能对应的设备标识
  115. <i class="el-icon-close" @click="leftRecoList=[]"></i>
  116. </div>
  117. <div
  118. v-for="(t,i) in leftRecoList"
  119. :key="t.id"
  120. class="l-ai-recom-item ai-recom-item"
  121. @click="selectAI(i,'l')"
  122. >
  123. <p>
  124. <el-checkbox v-model="t.checked"></el-checkbox>
  125. <span>{{t.name2}}</span>
  126. </p>
  127. <p>{{t.name}}</p>
  128. <p>{{t.date}}</p>
  129. <p>{{t.address}}</p>
  130. <p>{{t.address}}</p>
  131. </div>
  132. </div>
  133. </transition>
  134. </div>
  135. </div>
  136. <div class="right-table" style="float: right;">
  137. <h5>未对应的设备实例</h5>
  138. <!-- 查询条件 -->
  139. <div class="query-box clearfix">
  140. <div class="query-item">
  141. <label>设备实例关键字</label>
  142. <el-input placeholder="请输入设备实例关键字" v-model="form.keywords" class="input-with-select">
  143. <el-button slot="append" icon="el-icon-search"></el-button>
  144. </el-input>
  145. </div>
  146. <div class="query-item">
  147. <label>所在位置</label>
  148. <el-cascader placeholder="请选择所在位置" :options="options" filterable change-on-select></el-cascader>
  149. </div>
  150. </div>
  151. <!-- 右侧列表 -->
  152. <div class="table-box">
  153. <div class="r-custom-table custom-table" v-loading="rTableLoading">
  154. <div>
  155. <table>
  156. <thead>
  157. <tr>
  158. <td class="bgf5 special" style="width:30px;min-width:30px;"></td>
  159. <td class="bgf5" style="width:200px;min-width:200px;">设备实例名称</td>
  160. <td style="width:20%;">设备实例编码</td>
  161. <td style="width:20%;">所在业务空间</td>
  162. <td style="width:30%;">所在建筑楼层</td>
  163. </tr>
  164. </thead>
  165. </table>
  166. </div>
  167. <div ref="rTableBody" class="custom-table-body">
  168. <table>
  169. <tbody is="transition-group" name="el-zoom-in-top">
  170. <tr v-for="t in RtableData" :key="t.id" :data-id="t.id">
  171. <td class="bgf5 special" style="width:30px;min-width:30px;">
  172. <el-checkbox v-model="t.checked" @change="changeCheck(t.id,'r')"></el-checkbox>
  173. </td>
  174. <td class="bgf5" style="width:200px;min-width:200px;">
  175. <el-tooltip :content="t.date" placement="top">
  176. <span>{{t.date}}</span>
  177. </el-tooltip>
  178. </td>
  179. <td style="width:20%;">
  180. <el-tooltip :content="t.address" placement="top">
  181. <span>{{t.address}}</span>
  182. </el-tooltip>
  183. </td>
  184. <td style="width:20%;">
  185. <el-tooltip :content="t.address" placement="top">
  186. <span>{{t.address}}</span>
  187. </el-tooltip>
  188. </td>
  189. <td style="width:30%;">
  190. <el-tooltip :content="t.address" placement="top">
  191. <span>{{t.address}}</span>
  192. </el-tooltip>
  193. </td>
  194. </tr>
  195. </tbody>
  196. </table>
  197. </div>
  198. </div>
  199. <!-- 智能推荐 -->
  200. <transition name="el-zoom-in-top">
  201. <div class="AIRecom" v-show="rightRecoList.length>0&&!leftAI">
  202. <div class="r-title">
  203. 可能对应的设备实例
  204. <i class="el-icon-close" @click="rightRecoList=[]"></i>
  205. </div>
  206. <div
  207. v-for="(t,i) in rightRecoList"
  208. :key="t.id"
  209. class="r-ai-recom-item ai-recom-item"
  210. @click="selectAI(i,'r')"
  211. >
  212. <p>
  213. <el-checkbox v-model="t.checked"></el-checkbox>
  214. <span>{{t.name2}}</span>
  215. </p>
  216. <p>{{t.name}}</p>
  217. <p>{{t.date}}</p>
  218. <p>{{t.address}}</p>
  219. <p>{{t.address}}</p>
  220. </div>
  221. </div>
  222. </transition>
  223. </div>
  224. </div>
  225. </div>
  226. <!-- 历史记录弹窗 -->
  227. <history-dialog ref="history"></history-dialog>
  228. </div>
  229. </template>
  230. <script>
  231. import tools from "@/utils/tools";
  232. import historyDialog from "@/components/point/dynamicdata/historyDialog";
  233. import { mapGetters, mapActions } from "vuex";
  234. export default {
  235. components: {
  236. historyDialog
  237. },
  238. computed: {
  239. ...mapGetters("layout", ["projectId"])
  240. },
  241. data() {
  242. return {
  243. isSwitch: true, //AI辅助
  244. curType: "1", //当前所在tab页
  245. typeList: [
  246. {
  247. title: "设备类",
  248. name: "1"
  249. },
  250. {
  251. title: "2类",
  252. name: "2"
  253. }
  254. ], //tab页list
  255. options: [
  256. {
  257. value: "选项1",
  258. label: "黄金糕"
  259. },
  260. {
  261. value: "选项2",
  262. label: "双皮奶"
  263. },
  264. {
  265. value: "选项3",
  266. label: "蚵仔煎"
  267. },
  268. {
  269. value: "选项4",
  270. label: "龙须面"
  271. },
  272. {
  273. value: "选项5",
  274. label: "北京烤鸭"
  275. }
  276. ], //
  277. LtableData: [
  278. {
  279. id: 1,
  280. date: "2016-05-02",
  281. name: "王小虎",
  282. checked: false,
  283. address: "上海市普陀区金沙江路 1518 弄"
  284. },
  285. {
  286. id: 2,
  287. date: "2016-05-04",
  288. name: "王小虎",
  289. checked: false,
  290. address: "上海市普陀区金沙江路 1518 弄"
  291. },
  292. {
  293. id: 3,
  294. date: "2016-05-01",
  295. name: "王小虎",
  296. checked: false,
  297. address: "上海市普陀区金沙江路 1518 弄"
  298. },
  299. {
  300. id: 4,
  301. date: "2016-05-02",
  302. name: "王小虎",
  303. checked: false,
  304. address: "上海市普陀区金沙江路 1518 弄"
  305. },
  306. {
  307. id: 5,
  308. date: "2016-05-04",
  309. name: "王小虎",
  310. checked: false,
  311. address: "上海市普陀区金沙江路 1518 弄"
  312. },
  313. {
  314. id: 6,
  315. date: "2016-05-01",
  316. name: "王小虎",
  317. checked: false,
  318. address: "上海市普陀区金沙江路 1518 弄"
  319. },
  320. {
  321. id: 7,
  322. date: "2016-05-08",
  323. name: "王小虎",
  324. checked: false,
  325. address: "上海市普陀区金沙江路 1518 弄"
  326. },
  327. {
  328. id: 8,
  329. date: "2016-05-06",
  330. name: "王小虎",
  331. checked: false,
  332. address: "上海市普陀区金沙江路 1518 弄"
  333. },
  334. {
  335. id: 9,
  336. date: "2016-05-07",
  337. name: "王小虎",
  338. checked: false,
  339. address: "上海市普陀区金沙江路 1518 弄"
  340. }
  341. ], //列表数据
  342. RtableData: [
  343. {
  344. id: 1,
  345. date: "2016-05-02",
  346. name: "王小虎",
  347. checked: false,
  348. address: "上海市普陀区金沙江路 1518 弄"
  349. },
  350. {
  351. id: 2,
  352. date: "2016-05-04",
  353. name: "王小虎",
  354. checked: false,
  355. address: "上海市普陀区金沙江路 1518 弄"
  356. },
  357. {
  358. id: 3,
  359. date: "2016-05-01",
  360. name: "王小虎",
  361. checked: false,
  362. address: "上海市普陀区金沙江路 1518 弄"
  363. },
  364. {
  365. id: 4,
  366. date: "2016-05-02",
  367. name: "王小虎",
  368. checked: false,
  369. address: "上海市普陀区金沙江路 1518 弄"
  370. },
  371. {
  372. id: 5,
  373. date: "2016-05-04",
  374. name: "王小虎",
  375. checked: false,
  376. address: "上海市普陀区金沙江路 1518 弄"
  377. },
  378. {
  379. id: 6,
  380. date: "2016-05-01",
  381. name: "王小虎",
  382. checked: false,
  383. address: "上海市普陀区金沙江路 1518 弄"
  384. },
  385. {
  386. id: 7,
  387. date: "2016-05-08",
  388. name: "王小虎",
  389. checked: false,
  390. address: "上海市普陀区金沙江路 1518 弄"
  391. },
  392. {
  393. id: 8,
  394. date: "2016-05-06",
  395. name: "王小虎",
  396. checked: false,
  397. address: "上海市普陀区金沙江路 1518 弄"
  398. },
  399. {
  400. id: 9,
  401. date: "2016-05-07",
  402. name: "王小虎",
  403. checked: false,
  404. address: "上海市普陀区金沙江路 1518 弄"
  405. }
  406. ], //列表数据
  407. page: {
  408. pageSize: 50,
  409. pageNumber: 1,
  410. total: 0
  411. }, //分页
  412. form: {}, //查询条件
  413. leftRecoList: [], //左推荐
  414. rightRecoList: [], //右推荐
  415. leftAI: true, //左右推荐公用-互斥
  416. lArray: [], //左侧选中数据索引
  417. rArray: [], //右侧选中数据索引
  418. hasRequestedFlag: false, //用于标识是否关联过数据,若是则重新请求第一页数据,
  419. showPlus: false, //+1记录动画
  420. num: 0, //记录条数
  421. timer: null, //函数节流 延时器
  422. historyList: [], //操作历史
  423. lTableLoading: false,
  424. rTableLoading: false
  425. };
  426. },
  427. created() {},
  428. mounted() {
  429. let that = this;
  430. let lTableBody = this.$refs.lTableBody;
  431. lTableBody.addEventListener("scroll", () => {
  432. let scrollTop = lTableBody.scrollTop;
  433. let scrollHeight = lTableBody.scrollHeight;
  434. let offsetHeight = lTableBody.offsetHeight;
  435. if (scrollTop + offsetHeight >= scrollHeight) {
  436. console.log("request");
  437. this.lTableLoading = true;
  438. setTimeout(() => {
  439. this.lTableLoading = false;
  440. this.LtableData.push({
  441. date: "2016-05-02",
  442. name: "王小虎",
  443. id: new Date().getTime(),
  444. checked: false,
  445. address: "上海市普陀区金沙江路 1518 弄"
  446. });
  447. }, 1000);
  448. }
  449. });
  450. let rTableBody = this.$refs.rTableBody;
  451. rTableBody.addEventListener("scroll", () => {
  452. let scrollTop = rTableBody.scrollTop;
  453. let scrollHeight = rTableBody.scrollHeight;
  454. let offsetHeight = rTableBody.offsetHeight;
  455. if (scrollTop + offsetHeight >= scrollHeight) {
  456. console.log("request");
  457. this.rTableLoading = true;
  458. setTimeout(() => {
  459. this.rTableLoading = false;
  460. this.RtableData.push({
  461. date: "2016-05-02",
  462. name: "王小虎",
  463. id: new Date().getTime(),
  464. checked: false,
  465. address: "上海市普陀区金沙江路 1518 弄"
  466. });
  467. }, 1000);
  468. }
  469. });
  470. },
  471. computed: {
  472. requestFlag() {
  473. return this.lArray.length > 0 && this.rArray.length > 0;
  474. }
  475. },
  476. methods: {
  477. //切换AI辅助
  478. changeType() {},
  479. //推荐中的选择事件
  480. selectAI(i, l) {
  481. //i 索引 l 左侧AI or 右侧AI
  482. if (l == "l") {
  483. this.leftRecoList[i].checked = !this.leftRecoList[i].checked;
  484. this.changeCheck(this.leftRecoList[i].id, "l");
  485. this.LtableData.map((t, index) => {
  486. if (t.id == this.leftRecoList[i].id) {
  487. t.checked = true;
  488. }
  489. });
  490. } else {
  491. this.rightRecoList[i].checked = !this.rightRecoList[i].checked;
  492. this.changeCheck(this.rightRecoList[i].id, "r");
  493. this.RtableData.map((t, index) => {
  494. if (t.id == this.rightRecoList[i].id) {
  495. t.checked = true;
  496. }
  497. });
  498. }
  499. },
  500. //查看本次历史记录
  501. showHistory() {
  502. this.$refs.history.showDialog(this.historyList);
  503. },
  504. //隐藏 动画
  505. animate() {
  506. //前端真删,但是要将数据存到historyList中,弹窗中使用
  507. //两侧
  508. let history = { leftList: [], rightList: [] };
  509. for (let j = 0; j < this.LtableData.length; j++) {
  510. if (this.LtableData[j].checked) {
  511. let temp = this.LtableData.splice(j, 1);
  512. history.leftList.push(temp[0]);
  513. j--;
  514. }
  515. }
  516. for (let i = 0; i < this.RtableData.length; i++) {
  517. if (this.RtableData[i].checked) {
  518. let temp = this.RtableData.splice(i, 1);
  519. history.rightList.push(temp[0]);
  520. i--;
  521. }
  522. }
  523. this.historyList.push(history);
  524. this.lArray = [];
  525. this.rArray = [];
  526. this.num++;
  527. this.showPlus = true;
  528. setTimeout(() => {
  529. this.showPlus = false;
  530. }, 800);
  531. },
  532. //表格中的选择事件
  533. changeCheck(i, l) {
  534. // i ->数据id,l->左侧or右侧
  535. let key = l == "l" ? "lArray" : "rArray";
  536. if (!this[key].includes(i)) {
  537. this[key].push(i);
  538. } else {
  539. let index = this[key].indexOf(i);
  540. this[key].splice(index, 1);
  541. }
  542. },
  543. getData() {}
  544. },
  545. watch: {
  546. //判断两边是否均有选中值
  547. requestFlag(n, o) {
  548. if (n) {
  549. this.rightRecoList = [];
  550. this.leftRecoList = [];
  551. this.animate();
  552. }
  553. },
  554. //AI辅助-左侧
  555. lArray(n, o) {
  556. //先清空,返回结果后赋值
  557. this.rightRecoList = [];
  558. //上->此赋值操作与 后台返回的值 异步问题
  559. clearTimeout(this.timer);
  560. this.timer = setTimeout(() => {
  561. console.log("函数节流");
  562. if (n.length > 0) {
  563. this.leftAI = false;
  564. this.rightRecoList = [
  565. {
  566. id: 1,
  567. date: "2016-05-03",
  568. name: "王小虎",
  569. checked: false,
  570. name2: "99%",
  571. address: "上海市普陀区金沙江路 1518 弄"
  572. },
  573. {
  574. id: 2,
  575. date: "2016-05-03",
  576. name: "王小虎",
  577. checked: false,
  578. name2: "99%",
  579. address: "上海市普陀区金沙江路 1518 弄"
  580. },
  581. {
  582. id: 3,
  583. date: "2016-05-03",
  584. name: "王小虎",
  585. checked: false,
  586. name2: "99%",
  587. address: "上海市普陀区金沙江路 1518 弄"
  588. }
  589. ];
  590. } else {
  591. this.rightRecoList = [];
  592. this.leftAI = true;
  593. }
  594. }, 800);
  595. },
  596. //AI辅助-右侧
  597. rArray(n, o) {
  598. this.leftRecoList = [];
  599. clearTimeout(this.timer);
  600. this.timer = setTimeout(() => {
  601. console.log("函数节流");
  602. if (n.length > 0) {
  603. this.leftAI = true;
  604. this.leftRecoList = [
  605. {
  606. id: 1,
  607. date: "2016-05-03",
  608. name: "王小虎",
  609. checked: false,
  610. name2: "99%",
  611. address: "上海市普陀区金沙江路 1518 弄"
  612. },
  613. {
  614. id: 2,
  615. date: "2016-05-03",
  616. name: "王小虎",
  617. checked: false,
  618. name2: "99%",
  619. address: "上海市普陀区金沙江路 1518 弄"
  620. },
  621. {
  622. id: 3,
  623. date: "2016-05-03",
  624. name: "王小虎",
  625. checked: false,
  626. name2: "99%",
  627. address: "上海市普陀区金沙江路 1518 弄"
  628. }
  629. ];
  630. } else {
  631. this.leftRecoList = [];
  632. this.leftAI = false;
  633. }
  634. }, 800);
  635. }
  636. }
  637. };
  638. </script>
  639. <style lang="scss" scoped>
  640. #addRelation {
  641. height: 100%;
  642. background-color: #fff;
  643. padding: 10px 20px 10px 10px;
  644. .text-right {
  645. text-align: right;
  646. }
  647. .table-container {
  648. height: calc(100% - 250px);
  649. & > div {
  650. width: 49.5%;
  651. float: left;
  652. }
  653. .left-table,
  654. .right-table {
  655. height: 100%;
  656. h5 {
  657. line-height: 44px;
  658. padding-left: 5px;
  659. background-color: #dfe6ec;
  660. }
  661. .query-box {
  662. margin-bottom: 20px;
  663. .query-item {
  664. float: left;
  665. width: 30%;
  666. margin: 0 5px;
  667. label {
  668. display: block;
  669. }
  670. .el-select {
  671. width: 100%;
  672. }
  673. }
  674. }
  675. .table-box {
  676. height: calc(100% - 50px);
  677. position: relative;
  678. .AIRecom {
  679. position: absolute;
  680. width: 96%;
  681. height: 160px;
  682. bottom: 5px;
  683. left: 1%;
  684. background-color: rgba(255, 255, 255, 0.9);
  685. z-index: 3;
  686. font-size: 12px;
  687. .r-title {
  688. padding-left: 10px;
  689. i {
  690. float: right;
  691. }
  692. }
  693. .l-title {
  694. text-align: right;
  695. padding-right: 10px;
  696. i {
  697. float: left;
  698. }
  699. }
  700. .ai-recom-item {
  701. width: 30%;
  702. height: 126px;
  703. float: left;
  704. border: 1px solid #ebeef5;
  705. overflow: hidden;
  706. padding-top: 5px;
  707. box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  708. p {
  709. position: relative;
  710. white-space: nowrap;
  711. text-overflow: ellipsis;
  712. overflow: hidden;
  713. padding: 0 8px;
  714. z-index: -1;
  715. span {
  716. float: right;
  717. }
  718. .el-checkbox {
  719. margin-right: 0;
  720. }
  721. }
  722. }
  723. .ai-recom-item.r-ai-recom-item + .ai-recom-item {
  724. margin-left: 3%;
  725. }
  726. .l-ai-recom-item {
  727. float: right;
  728. p {
  729. text-align: right;
  730. padding-right: 10px;
  731. span {
  732. float: left;
  733. }
  734. }
  735. }
  736. .ai-recom-item.l-ai-recom-item + .ai-recom-item {
  737. margin-right: 3%;
  738. }
  739. }
  740. }
  741. ::-webkit-scrollbar {
  742. display: none;
  743. }
  744. //列表
  745. .custom-table {
  746. height: 100%;
  747. table {
  748. table-layout: fixed;
  749. width: 100%;
  750. overflow: hidden;
  751. }
  752. .custom-table-body {
  753. height: calc(100% - 30px);
  754. overflow-x: hidden;
  755. overflow-y: auto;
  756. }
  757. tr {
  758. line-height: 38px;
  759. }
  760. td {
  761. border-bottom: 1px solid #ebeef5;
  762. white-space: nowrap;
  763. text-overflow: ellipsis;
  764. overflow: hidden;
  765. }
  766. .bgf5 {
  767. background-color: #f5f7fa;
  768. }
  769. td.special {
  770. box-sizing: border-box;
  771. }
  772. }
  773. .l-custom-table {
  774. td {
  775. text-align: right;
  776. padding-right: 10px;
  777. }
  778. }
  779. .r-custom-table {
  780. td {
  781. padding-left: 10px;
  782. }
  783. }
  784. }
  785. }
  786. .fr {
  787. padding-top: 10px;
  788. float: right;
  789. }
  790. .clearfix:before,
  791. .clearfix:after {
  792. content: "";
  793. display: block;
  794. clear: both;
  795. }
  796. .clearfix {
  797. zoom: 1;
  798. }
  799. .ani-his-plus {
  800. position: relative;
  801. .plusOne {
  802. position: absolute;
  803. color: red;
  804. left: 50%;
  805. bottom: 50%;
  806. font-size: 20px;
  807. font-weight: 800;
  808. }
  809. .startAni {
  810. animation: fadeToTop 1s;
  811. }
  812. }
  813. @keyframes fadeToTop {
  814. 0% {
  815. left: 50%;
  816. bottom: 50%;
  817. opacity: 1;
  818. }
  819. 100% {
  820. bottom: 100%;
  821. opacity: 0;
  822. }
  823. }
  824. }
  825. </style>