Ligature.vue 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887
  1. <template>
  2. <div class="JoinLine">
  3. <h6
  4. v-if="judgeAnswer == 'userAnswer' || judgeAnswer == 'studentAnswer'"
  5. class="standardTitle"
  6. style="margin: 10px 0 8px 24px"
  7. >
  8. {{ judgeAnswer == "userAnswer" ? "Your answer" : "Student answers" }}
  9. </h6>
  10. <h6
  11. v-else-if="judgeAnswer == 'standardAnswer'"
  12. class="standardTitle"
  13. style="margin: 10px 0 8px 24px"
  14. >
  15. Standard answer
  16. </h6>
  17. <div class="main">
  18. <div style="text-align: center">{{ curQue.title }}</div>
  19. <div :id="'container' + number" class="container">
  20. <div class="left">
  21. <ul>
  22. <div>{{ curQue.conTitle }}</div>
  23. <li
  24. :class="['left' + index + number]"
  25. v-for="(item, index) in curQue.con"
  26. :key="'left' + index"
  27. >
  28. <!-- :style="{
  29. background:
  30. JSON.stringify(data).indexOf(item.nodeId) != -1
  31. ? '#F0F0F0'
  32. : '',
  33. }" -->
  34. <div>
  35. <img
  36. v-if="item.img_list.length > 0"
  37. :src="item.img_list[0].id"
  38. alt=""
  39. @load="conImageload"
  40. />
  41. <div
  42. class="text"
  43. :class="[
  44. 'left' + index,
  45. judgeAnswer == 'standardAnswer' ? 'correct' : '',
  46. YouranswerClass(item, 'left'),
  47. ]"
  48. v-if="
  49. item.detail.wordsList.length > 0 || item.detail.sentence
  50. "
  51. >
  52. <!-- 大于0就说明分词了 -->
  53. <template v-if="item.detail.wordsList.length > 0">
  54. <div
  55. v-for="(it, wordIndex) in item.detail.wordsList"
  56. :key="'word' + wordIndex"
  57. >
  58. <template v-if="item.detail.pyPosition == 'top'">
  59. <p
  60. style="
  61. font-family: 'GB-PINYINOK-B';
  62. font-size: 14px;
  63. line-height: 20px;
  64. "
  65. >
  66. {{ it.pinyin }}
  67. </p>
  68. <p
  69. style="
  70. font-family: 'FZJCGFKTK';
  71. font-size: 20px;
  72. line-height: 150%;
  73. "
  74. >
  75. {{ it.chs }}
  76. </p>
  77. </template>
  78. <template v-else>
  79. <p
  80. style="
  81. font-family: 'FZJCGFKTK';
  82. font-size: 20px;
  83. line-height: 150%;
  84. "
  85. >
  86. {{ it.chs }}
  87. </p>
  88. <p
  89. style="
  90. font-family: 'GB-PINYINOK-B';
  91. font-size: 14px;
  92. line-height: 20px;
  93. "
  94. >
  95. {{ it.pinyin }}
  96. </p>
  97. </template>
  98. </div>
  99. </template>
  100. <template v-else>
  101. {{ item.detail.sentence }}
  102. </template>
  103. </div>
  104. </div>
  105. <span>{{ item.Number }}</span>
  106. <img
  107. v-if="JSON.stringify(data).indexOf(item.nodeId) == -1"
  108. name="source"
  109. :id="item.nodeId"
  110. src="../../../assets/adult/LineImg.png"
  111. alt=""
  112. />
  113. <img
  114. v-else
  115. :id="item.nodeId"
  116. name="target"
  117. src="../../../assets/adult/LineImg-select.png"
  118. alt=""
  119. />
  120. </li>
  121. </ul>
  122. </div>
  123. <div class="right">
  124. <ul>
  125. <div>{{ curQue.optionTitle }}</div>
  126. <li
  127. :class="['right' + index + number]"
  128. v-for="(item, index) in curQue.option"
  129. :key="'right' + index"
  130. >
  131. <!-- :style="{
  132. background:
  133. JSON.stringify(data).indexOf(item.nodeId) != -1
  134. ? '#F0F0F0'
  135. : '',
  136. }" -->
  137. <img
  138. v-if="JSON.stringify(data).indexOf(item.nodeId) == -1"
  139. name="source"
  140. :id="item.nodeId"
  141. src="../../../assets/adult/LineImg.png"
  142. alt=""
  143. />
  144. <img
  145. v-else
  146. :id="item.nodeId"
  147. name="target"
  148. src="../../../assets/adult/LineImg-select.png"
  149. alt=""
  150. />
  151. <span>{{ item.Number }}</span>
  152. <div>
  153. <img
  154. v-if="item.img_list.length > 0"
  155. :src="item.img_list[0].id"
  156. alt=""
  157. @load="conImageload"
  158. />
  159. <div
  160. class="text"
  161. :class="[
  162. 'right' + index,
  163. judgeAnswer == 'standardAnswer' ? 'correct' : '',
  164. YouranswerClass(item, 'right'),
  165. ]"
  166. v-if="
  167. item.detail.wordsList.length > 0 || item.detail.sentence
  168. "
  169. >
  170. <!-- 大于0就说明分词了 -->
  171. <template v-if="item.detail.wordsList.length > 0">
  172. <div
  173. v-for="(it, wordIndex) in item.detail.wordsList"
  174. :key="'word' + wordIndex"
  175. >
  176. <template v-if="item.detail.pyPosition == 'top'">
  177. <p
  178. style="
  179. font-family: 'GB-PINYINOK-B';
  180. font-size: 14px;
  181. line-height: 20px;
  182. "
  183. >
  184. {{ it.pinyin }}
  185. </p>
  186. <p
  187. style="
  188. font-family: 'FZJCGFKTK';
  189. font-size: 20px;
  190. line-height: 150%;
  191. "
  192. >
  193. {{ it.chs }}
  194. </p>
  195. </template>
  196. <template v-else>
  197. <p
  198. style="
  199. font-family: 'FZJCGFKTK';
  200. font-size: 20px;
  201. line-height: 150%;
  202. "
  203. >
  204. {{ it.chs }}
  205. </p>
  206. <p
  207. style="
  208. font-family: 'GB-PINYINOK-B';
  209. font-size: 14px;
  210. line-height: 20px;
  211. "
  212. >
  213. {{ it.pinyin }}
  214. </p>
  215. </template>
  216. </div>
  217. </template>
  218. <template v-else>
  219. {{ item.detail.sentence }}
  220. </template>
  221. </div>
  222. </div>
  223. </li>
  224. </ul>
  225. </div>
  226. </div>
  227. </div>
  228. <!-- 清除所有连线及连线的状态 -->
  229. <div class="fuwei" :class="[TaskModel == 'ANSWER' ? 'notAllow' : '']">
  230. <div @click="clearLine">
  231. <img src="../../../assets/adult/fuwei.png" alt="" />
  232. 复位
  233. </div>
  234. </div>
  235. </div>
  236. </template>
  237. <script>
  238. //这里可以导入其它文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
  239. //例如:import 《组件名称》from ‘《组件路径》';
  240. export default {
  241. //import引入的组件需要注入到对象中才能使用
  242. components: {},
  243. props: ["curQue", "TaskModel", "number", "judgeAnswer"],
  244. data() {
  245. //这里存放数据
  246. return {
  247. data: {
  248. userAnswerJudge: "",
  249. data: [],
  250. },
  251. allimgnumber: 0,
  252. lodimgnumber: 0,
  253. };
  254. },
  255. //计算属性 类似于data概念
  256. computed: {},
  257. //监控data中数据变化
  258. watch: {
  259. curQue(val, oldval) {
  260. this.$forceUpdate(); //触发更新函数更新高度
  261. },
  262. },
  263. //方法集合
  264. methods: {
  265. // 判断对错
  266. YouranswerClass(item, type) {
  267. if (this.judgeAnswer == "studentAnswer") {
  268. let clss = "error";
  269. this.data.data.forEach((items) => {
  270. if (type == "left") {
  271. if (items.source == item.nodeId) {
  272. if (items.correct) {
  273. clss = "correct";
  274. }
  275. }
  276. } else {
  277. if (items.target == item.nodeId) {
  278. if (items.correct) {
  279. clss = "correct";
  280. }
  281. }
  282. }
  283. });
  284. return clss;
  285. } else {
  286. return "";
  287. }
  288. },
  289. // 清除所有连线
  290. clearLine() {
  291. if (this.judgeAnswer) {
  292. return;
  293. }
  294. if (!this.TaskModel || this.TaskModel != "ANSWER") {
  295. this.data.data.forEach((item) => {
  296. if (item.source) {
  297. if (item.source.indexOf("Isexample") == -1) {
  298. item.source = null;
  299. item.target = null;
  300. }
  301. }
  302. });
  303. this.data.userAnswerJudge = "";
  304. this.jsPlumb.deleteEveryConnection(); //清除连线方法
  305. this.$set(
  306. this.curQue,
  307. "Bookanswer",
  308. JSON.parse(JSON.stringify(this.data))
  309. );
  310. this.data.data.forEach((item) => {
  311. this.jsPlumb.connect({
  312. source: item.source,
  313. target: item.target,
  314. });
  315. });
  316. }
  317. },
  318. showPlumb() {
  319. this.jsPlumb = this.$jsPlumb.getInstance({
  320. Container: "container" + this.number + this.judgeAnswer, // 选择器id
  321. EndpointStyle: { radius: 1, fill: "#74B5CA" }, // 端点样式
  322. PaintStyle: { stroke: "#DE4444", strokeWidth: 2 }, // 绘画样式,默认8px线宽 #456
  323. HoverPaintStyle: { stroke: "#18A0FB", strokeWidth: null }, // 默认悬停样式 默认为null
  324. ConnectionOverlays: [
  325. // // 此处可以设置所有箭头的样式
  326. // [
  327. // "Arrow",
  328. // {
  329. // // 设置参数可以参考中文文档
  330. // location: 1,
  331. // length: 12,
  332. // paintStyle: {
  333. // stroke: "#7663EC",
  334. // fill: "#7663EC",
  335. // },
  336. // },
  337. // ],
  338. // [
  339. // "Label",
  340. // {
  341. // location: 0.1,
  342. // cssClass: "aLabel", //hover时label的样式名
  343. // events: {
  344. // click: (info) => {
  345. // console.log(info);
  346. // },
  347. // },
  348. // visible: true,
  349. // },
  350. // ],
  351. ],
  352. Connector: ["Straight"], // 要使用的默认连接器的类型:直线,折线,曲线等
  353. DrapOptions: { cursor: "crosshair", zIndex: 2000 },
  354. });
  355. this.jsPlumb.batch(() => {
  356. for (let i = 0; i < this.curQue.con.length; i++) {
  357. this.initLeaf(this.curQue.con[i].nodeId, "source");
  358. }
  359. for (let j = 0; j < this.curQue.option.length; j++) {
  360. this.initLeaf(this.curQue.option[j].nodeId, "target");
  361. }
  362. });
  363. this.setjsPlumb(true, true);
  364. //点击连线
  365. this.jsPlumb.bind("click", (conn, originalEvent) => {
  366. if (this.judgeAnswer) {
  367. return;
  368. }
  369. let index = conn.sourceId.indexOf("Isexample");
  370. if (index != -1) {
  371. return;
  372. }
  373. if (!this.TaskModel || this.TaskModel != "ANSWER") {
  374. // 删除点击的线
  375. this.curQue.con.forEach((item, i) => {
  376. if (item.nodeId == conn.sourceId) {
  377. this.$set(this.data.data[i], "source", null);
  378. this.$set(this.data.data[i], "target", null);
  379. }
  380. });
  381. let node = document.getElementById(conn.sourceId);
  382. this.jsPlumb.removeAllEndpoints(node);
  383. sessionStorage.setItem("LineData", JSON.stringify(this.data));
  384. this.$set(
  385. this.curQue,
  386. "Bookanswer",
  387. JSON.parse(JSON.stringify(this.data))
  388. );
  389. }
  390. });
  391. //连线时触发
  392. this.jsPlumb.bind("connection", (conn, originalEvent) => {
  393. if (!this.TaskModel || this.TaskModel != "ANSWER") {
  394. let fig = false;
  395. this.data.data.forEach((item) => {
  396. if (item.source == conn.sourceId && item.target == conn.targetId) {
  397. fig = true;
  398. }
  399. });
  400. if (!fig) {
  401. this.curQue.con.forEach((item, i) => {
  402. if (conn.sourceId == item.nodeId) {
  403. this.$set(this.data.data[i], "source", conn.sourceId);
  404. this.$set(this.data.data[i], "target", conn.targetId);
  405. }
  406. });
  407. this.changeAllCorrect();
  408. sessionStorage.setItem("LineData", JSON.stringify(this.data));
  409. this.$set(
  410. this.curQue,
  411. "Bookanswer",
  412. JSON.parse(JSON.stringify(this.data))
  413. );
  414. }
  415. }
  416. });
  417. //右键触发
  418. this.jsPlumb.bind("contextmenu", (conn, originalEvent) => {
  419. console.log(conn, originalEvent);
  420. });
  421. },
  422. // 初始化规则使其可以连线、拖拽
  423. initLeaf(id, type) {
  424. const ins = this.jsPlumb;
  425. const elem = document.getElementById(id);
  426. if (type === "source") {
  427. ins.makeSource(elem, {
  428. anchor: [1, 0.5, 0.5, 0.5], // 左 上 右 下 数字我调不太准确 可改成left right
  429. allowLoopback: false, //允许回连
  430. maxConnections: 1, //最大连接数(-1表示不限制)
  431. });
  432. } else {
  433. ins.makeTarget(elem, {
  434. anchor: [0, 0.5, 0, 0],
  435. allowLoopback: false,
  436. maxConnections: 1,
  437. });
  438. }
  439. },
  440. setjsPlumb(sourceFlag, targetFlag) {
  441. const source = document.getElementsByName("source");
  442. const target = document.getElementsByName("target");
  443. this.jsPlumb.setSourceEnabled(source, sourceFlag);
  444. this.jsPlumb.setTargetEnabled(target, targetFlag);
  445. this.jsPlumb.setDraggable(source, false); // 是否支持拖拽
  446. this.jsPlumb.setDraggable(target, false); // 是否支持拖拽
  447. },
  448. conImageload() {
  449. this.lodimgnumber++;
  450. let _this = this;
  451. if (_this.lodimgnumber == _this.allimgnumber) {
  452. _this.curQue.option.forEach((item, index) => {
  453. for (let i = 0; i < this.curQue.con.length; i++) {
  454. let nodeleft = document.getElementsByClassName(
  455. `left${i + this.number}`
  456. )[0];
  457. let noderight = document.getElementsByClassName(
  458. `right${index + this.number}`
  459. )[0];
  460. if (nodeleft.offsetHeight > noderight.offsetHeight) {
  461. noderight.style.height = nodeleft.offsetHeight + "px";
  462. } else {
  463. nodeleft.style.height = noderight.offsetHeight + "px";
  464. }
  465. }
  466. });
  467. }
  468. },
  469. // 判断是否全对
  470. changeAllCorrect() {
  471. let flag = true;
  472. this.data.data.forEach((item) => {
  473. this.curQue.con.forEach((items) => {
  474. if (item.source && item.target) {
  475. if (item.source == items.nodeId) {
  476. if (
  477. Object.prototype.toString
  478. .call(items.AnswerList)
  479. .indexOf("Number") != -1
  480. ) {
  481. if (
  482. item.target != this.curQue.option[items.AnswerList].nodeId
  483. ) {
  484. flag = false;
  485. }
  486. } else {
  487. flag = false;
  488. }
  489. }
  490. } else {
  491. flag = false;
  492. }
  493. });
  494. });
  495. if (flag) {
  496. this.data.userAnswerJudge = "[JUDGE##T##JUDGE]";
  497. } else {
  498. this.data.userAnswerJudge = "[JUDGE##F##JUDGE]";
  499. }
  500. },
  501. },
  502. //生命周期 - 创建完成(可以访问当前this实例)
  503. created() {
  504. if (!this.curQue.Bookanswer) {
  505. // sData = JSON.parse(sessionStorage.getItem("LineData"));
  506. } else {
  507. this.data = JSON.parse(JSON.stringify(this.curQue.Bookanswer));
  508. }
  509. this.curQue.con.forEach((item, i) => {
  510. let nodeId = item.Isexample
  511. ? "left_" + i + this.number + "Isexample" + this.judgeAnswer
  512. : "left_" + i + this.number + this.judgeAnswer;
  513. item.nodeId = nodeId;
  514. if (item.img_list.length > 0) {
  515. this.allimgnumber++;
  516. }
  517. if (item.Isexample) {
  518. this.data.data.push({
  519. source: item.nodeId,
  520. target: "right_" + item.AnswerList + this.number + this.judgeAnswer,
  521. index: i,
  522. answer: item.AnswerList,
  523. });
  524. }
  525. });
  526. this.curQue.option.forEach((item, i) => {
  527. let nodeId = item.Isexample
  528. ? "right_" + i + this.number + "Isexample" + this.judgeAnswer
  529. : "right_" + i + this.number + this.judgeAnswer;
  530. item.nodeId = nodeId;
  531. if (item.img_list.length > 0) {
  532. this.allimgnumber++;
  533. }
  534. });
  535. this.curQue.con.forEach((item, i) => {
  536. if (!item.Isexample) {
  537. this.data.data.push({
  538. answer: item.AnswerList,
  539. index: i,
  540. source: null,
  541. target: null,
  542. // userAnswerJudge:
  543. // Object.prototype.toString.call(item.AnswerList).indexOf("Number") ==
  544. // -1
  545. // ? ""
  546. // : "[JUDGE##F##JUDGE]",
  547. });
  548. }
  549. });
  550. if (this.judgeAnswer == "studentAnswer") {
  551. let conData = JSON.parse(JSON.stringify(this.curQue));
  552. this.curQue.con.forEach((item, i) => {
  553. let nodeId = item.Isexample
  554. ? "left_" + i + this.number + "Isexample" + this.judgeAnswer
  555. : "left_" + i + this.number + this.judgeAnswer;
  556. item.nodeId = nodeId;
  557. if (item.img_list.length > 0) {
  558. this.allimgnumber++;
  559. }
  560. if (item.Isexample) {
  561. this.data.data.push({
  562. source: item.nodeId,
  563. target: "right_" + item.AnswerList + this.number + this.judgeAnswer,
  564. index: i,
  565. answer: item.AnswerList,
  566. });
  567. }
  568. });
  569. this.curQue.option.forEach((item, i) => {
  570. let nodeId = item.Isexample
  571. ? "right_" + i + this.number + "Isexample" + this.judgeAnswer
  572. : "right_" + i + this.number + this.judgeAnswer;
  573. item.nodeId = nodeId;
  574. if (item.img_list.length > 0) {
  575. this.allimgnumber++;
  576. }
  577. });
  578. this.curQue = JSON.parse(JSON.stringify(conData));
  579. }
  580. },
  581. //生命周期 - 挂载完成(可以访问DOM元素)
  582. mounted() {
  583. this.showPlumb();
  584. // 根据记录自动连起来
  585. if (this.allimgnumber == 0) {
  586. for (let i = 0; i < this.curQue.con.length; i++) {
  587. let nodeleft = document.getElementsByClassName(
  588. `left${i + this.number}`
  589. )[this.judgeAnswer == "standardAnswer" ? 1 : 0];
  590. let noderight = document.getElementsByClassName(
  591. `right${i + this.number}`
  592. )[this.judgeAnswer == "standardAnswer" ? 1 : 0];
  593. if (nodeleft && noderight) {
  594. if (nodeleft.offsetHeight > noderight.offsetHeight) {
  595. noderight.style.height = nodeleft.offsetHeight + "px";
  596. } else {
  597. nodeleft.style.height = noderight.offsetHeight + "px";
  598. }
  599. }
  600. }
  601. }
  602. this.data.data.forEach((item) => {
  603. if (item.source && item.target) {
  604. item.source = item.source + this.judgeAnswer;
  605. item.target = item.target + this.judgeAnswer;
  606. }
  607. });
  608. if (this.judgeAnswer == "standardAnswer") {
  609. this.data.data = [];
  610. this.curQue.con.forEach((item) => {
  611. if (
  612. Object.prototype.toString.call(item.AnswerList).indexOf("Number") !=
  613. -1
  614. ) {
  615. this.data.data.push({
  616. source: item.nodeId,
  617. target: this.curQue.option[item.AnswerList].nodeId,
  618. });
  619. }
  620. });
  621. } else if (this.judgeAnswer == "studentAnswer") {
  622. this.data.data.forEach((item) => {
  623. this.curQue.con.forEach((con) => {
  624. if (item.source == con.nodeId) {
  625. if (
  626. Object.prototype.toString
  627. .call(con.AnswerList)
  628. .indexOf("Number") != -1
  629. ) {
  630. if (item.target == this.curQue.option[con.AnswerList].nodeId) {
  631. item.correct = true;
  632. }
  633. }
  634. }
  635. });
  636. });
  637. }
  638. if (this.data.data.length > 0) {
  639. this.data.data.forEach((item) => {
  640. this.jsPlumb.connect({
  641. source: item.source,
  642. target: item.target,
  643. });
  644. });
  645. }
  646. },
  647. //生命周期-创建之前
  648. beforeCreated() {},
  649. //生命周期-挂载之前
  650. beforeMount() {},
  651. //生命周期-更新之前
  652. beforUpdate() {},
  653. //生命周期-更新之后
  654. updated() {
  655. for (let i = 0; i < this.curQue.con.length; i++) {
  656. let nodeleft = document.getElementsByClassName(`left${i}`)[0];
  657. let noderight = document.getElementsByClassName(`right${i}`)[0];
  658. if (nodeleft && noderight) {
  659. if (nodeleft.offsetHeight > noderight.offsetHeight) {
  660. noderight.style.height = nodeleft.offsetHeight + "px";
  661. } else {
  662. nodeleft.style.height = noderight.offsetHeight + "px";
  663. }
  664. }
  665. }
  666. },
  667. //生命周期-销毁之前
  668. beforeDestory() {},
  669. //生命周期-销毁完成
  670. destoryed() {},
  671. //如果页面有keep-alive缓存功能,这个函数会触发
  672. activated() {},
  673. };
  674. </script>
  675. <style lang="scss" scoped>
  676. /* @import url(); 引入css类 */
  677. .correct {
  678. background: rgba(44, 167, 103, 0.1) !important;
  679. /* 正确答案 */
  680. border: 1px solid #2ca767 !important;
  681. }
  682. .error {
  683. background: rgba(237, 52, 45, 0.1) !important;
  684. /* 错误颜色 */
  685. border: 1px solid #ed342d !important;
  686. }
  687. .JoinLine {
  688. width: 100%;
  689. .main {
  690. background: #f7f7f7;
  691. border: 1px solid rgba(0, 0, 0, 0.1);
  692. box-sizing: border-box;
  693. border-radius: 8px;
  694. padding: 24px 40px;
  695. }
  696. .container {
  697. position: relative;
  698. display: flex;
  699. justify-content: center;
  700. ul {
  701. list-style: none;
  702. li {
  703. // width: 333px;
  704. // // height: 64px;
  705. // background: #ffffff;
  706. // border: 1px solid rgba(0, 0, 0, 0.1);
  707. // box-sizing: border-box;
  708. // border-radius: 8px;
  709. margin-bottom: 16px;
  710. display: flex;
  711. align-items: center;
  712. > img {
  713. width: 24px;
  714. height: 24px;
  715. }
  716. }
  717. }
  718. .left {
  719. width: 50%;
  720. ul {
  721. > div {
  722. text-align: center;
  723. font-weight: bold;
  724. font-size: 16px;
  725. line-height: 150%;
  726. color: #000000;
  727. margin-bottom: 16px;
  728. }
  729. li {
  730. padding: 8px 0;
  731. display: flex;
  732. justify-content: flex-end; //右对齐
  733. > div {
  734. font-size: 16px;
  735. line-height: 150%;
  736. color: #000000;
  737. img {
  738. max-width: 238px;
  739. height: 158px;
  740. }
  741. .text {
  742. max-width: 200px;
  743. width: 100%;
  744. padding: 8px 16px;
  745. background: #ffffff;
  746. border: 1px solid rgba(0, 0, 0, 0.1);
  747. box-sizing: border-box;
  748. border-radius: 8px;
  749. display: flex;
  750. flex-wrap: wrap;
  751. p {
  752. margin: 0;
  753. }
  754. }
  755. }
  756. span {
  757. width: 24px;
  758. height: 24px;
  759. font-family: "robot";
  760. font-style: normal;
  761. font-weight: normal;
  762. font-size: 16px;
  763. line-height: 150%;
  764. text-align: center;
  765. color: #ffffff;
  766. background: #a7a7a7;
  767. border-radius: 50%;
  768. margin-left: 8px;
  769. margin-right: 12px;
  770. }
  771. > img {
  772. cursor: pointer;
  773. width: 24px;
  774. height: 24px;
  775. }
  776. }
  777. }
  778. }
  779. .right {
  780. width: 50%;
  781. margin-left: 88px;
  782. ul {
  783. > div {
  784. width: 334px;
  785. text-align: center;
  786. font-weight: bold;
  787. font-size: 16px;
  788. line-height: 150%;
  789. color: #000000;
  790. margin-bottom: 16px;
  791. }
  792. li {
  793. padding: 8px 0;
  794. > img {
  795. margin-left: 16px;
  796. width: 24px;
  797. height: 24px;
  798. }
  799. > span {
  800. width: 24px;
  801. height: 24px;
  802. font-family: "robot";
  803. font-style: normal;
  804. font-weight: normal;
  805. font-size: 16px;
  806. line-height: 150%;
  807. text-align: center;
  808. color: #ffffff;
  809. background: #a7a7a7;
  810. border-radius: 50%;
  811. margin-left: 12px;
  812. margin-right: 8px;
  813. }
  814. div {
  815. img {
  816. max-width: 238px;
  817. height: 158px;
  818. }
  819. .text {
  820. max-width: 200px;
  821. padding: 8px 16px;
  822. background: #ffffff;
  823. border: 1px solid rgba(0, 0, 0, 0.1);
  824. box-sizing: border-box;
  825. border-radius: 8px;
  826. display: flex;
  827. align-items: center;
  828. flex-wrap: wrap;
  829. p {
  830. margin: 0;
  831. }
  832. }
  833. }
  834. }
  835. }
  836. }
  837. }
  838. .fuwei {
  839. margin-top: 16px;
  840. height: 40px;
  841. &.notAllow {
  842. > div {
  843. cursor: not-allowed;
  844. }
  845. }
  846. > div {
  847. float: right;
  848. width: 72px;
  849. height: 40px;
  850. background: #ffffff;
  851. border: 1px solid rgba(0, 0, 0, 0.1);
  852. box-sizing: border-box;
  853. border-radius: 8px;
  854. display: flex;
  855. align-items: center;
  856. font-weight: bold;
  857. font-size: 16px;
  858. line-height: 150%;
  859. display: flex;
  860. align-items: center;
  861. text-align: center;
  862. color: #000000;
  863. cursor: pointer;
  864. img {
  865. margin-left: 8px;
  866. width: 24px;
  867. height: 24px;
  868. }
  869. }
  870. }
  871. }
  872. </style>
  873. <style lang="scss">
  874. .jtk-connector {
  875. path {
  876. cursor: pointer;
  877. }
  878. }
  879. </style>