operateData.vue 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691
  1. <style>
  2. .materialReport .chart-card-content {
  3. display: none !important;
  4. }
  5. </style>
  6. <style lang="less" scoped>
  7. ::v-deep .ant-table {
  8. //设置表格头部竖向滚动宽度
  9. ::v-deep .ant-table-header::-webkit-scrollbar {
  10. width: 4px;
  11. }
  12. //设置表格体滚动宽度
  13. ::v-deep .ant-table-body,
  14. .ant-table-body-inner {
  15. &::-webkit-scrollbar {
  16. width: 4px;
  17. height: 4px;
  18. }
  19. &::-webkit-scrollbar-thumb {
  20. border-radius: 4px;
  21. box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  22. background: #909090;
  23. }
  24. &::-webkit-scrollbar-track {
  25. box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  26. border-radius: 4px;
  27. background: #ededed;
  28. }
  29. }
  30. //解决固定列底部预留的空隙
  31. ::v-deep .ant-table-fixed-left,
  32. .ant-table-fixed-right {
  33. .ant-table-body-outer {
  34. margin-bottom: 0 !important;
  35. }
  36. }
  37. }
  38. </style>
  39. <style scoped>
  40. ::v-deep .ant-tabs .ant-tabs-large-bar .ant-tabs-tab {
  41. padding: 11px 16px;
  42. }
  43. .bg {
  44. width: 100%;
  45. height: 100%;
  46. }
  47. .bg:after {
  48. content: '';
  49. width: 110%;
  50. height: 110%;
  51. position: absolute;
  52. left: -5%;
  53. top: -5%;
  54. background: inherit;
  55. filter: blur(10px);
  56. z-index: 2;
  57. background: rgba(0, 0, 0, 0.8);
  58. }
  59. .top-ul-style {
  60. width: 100%;
  61. padding-left: 0;
  62. }
  63. .top-ul-style li {
  64. height: 100px;
  65. border: 1px solid #f2f2f2;
  66. margin-bottom: 5px;
  67. padding: 10px;
  68. display: flex;
  69. justify-content: space-between;
  70. }
  71. .li-cost {
  72. display: flex;
  73. flex-flow: column;
  74. justify-content: center;
  75. align-content: flex-end;
  76. }
  77. .li-cost span {
  78. font-size: 16px;
  79. font-weight: 500;
  80. min-width: 50px;
  81. text-align: right;
  82. }
  83. </style>
  84. <template>
  85. <div class="materialReport">
  86. <a-row :gutter="24">
  87. <a-col :xl="24">
  88. <div class="option" style="justify-content: space-between">
  89. <div class="option" style="padding: 0">
  90. <div class="item">
  91. <span>媒体</span>
  92. <a-radio-group v-model="mediaDimension" @change="getProjectList">
  93. <a-radio-button value="b">快手</a-radio-button>
  94. <a-radio-button value="a">头条</a-radio-button>
  95. </a-radio-group>
  96. </div>
  97. <div class="item">
  98. <span>人员</span>
  99. <a-select
  100. v-model="person"
  101. style="width: 150px; margin-left: 10px"
  102. :mode="'default'"
  103. :maxTagCount="2"
  104. :loading="specificLoading"
  105. :filterOption="filterOption"
  106. showSearch
  107. allowClear
  108. >
  109. <a-select-option
  110. v-for="(item, index) in dataDimensionList"
  111. :key="index + 1"
  112. :value="item.userId"
  113. >
  114. {{ item.userName }}
  115. </a-select-option>
  116. </a-select>
  117. </div>
  118. <div class="item">
  119. <span>岗位</span>
  120. <a-select
  121. v-model="post"
  122. style="width: 150px; margin-left: 10px"
  123. :mode="'default'"
  124. allowClear
  125. >
  126. <a-select-option value="operationAssistant"> 运营助理 </a-select-option>
  127. <a-select-option value="manager"> 运营经理 </a-select-option>
  128. <a-select-option value="operator"> 运营专员 </a-select-option>
  129. </a-select>
  130. </div>
  131. <div class="item">
  132. <span>季度</span>
  133. <a-select v-model="quarter" style="width: 150px; margin-left: 10px" :mode="'default'">
  134. <a-select-option :value="1"> 第一季度 </a-select-option>
  135. <a-select-option :value="2"> 第二季度 </a-select-option>
  136. <a-select-option :value="3"> 第三季度 </a-select-option>
  137. <a-select-option :value="4"> 第四季度 </a-select-option>
  138. </a-select>
  139. </div>
  140. <!-- <div class="item">
  141. <span>类型</span>
  142. <a-select
  143. v-model="dataType"
  144. style="width: 300px; margin-left: 10px"
  145. :mode="'default'"
  146. allowClear
  147. >
  148. <a-select-option :value="0"> 消耗 </a-select-option>
  149. <a-select-option :value="1"> 在投客户数-项目 </a-select-option>
  150. <a-select-option :value="2"> 在投客户数-广告主主体 </a-select-option>
  151. <a-select-option :value="3"> 基建数 </a-select-option>
  152. </a-select>
  153. </div> -->
  154. </div>
  155. <div class="item" style="float: right">
  156. <a-button :loading="resetLoading" type="primary" @click="handleSubmit"> 搜索 </a-button>
  157. <a-button
  158. :disabled="spinning"
  159. :loading="resetLoading"
  160. style="margin-left: 15px"
  161. @click="resetSubmit"
  162. >
  163. 重置
  164. </a-button>
  165. </div>
  166. </div>
  167. </a-col>
  168. </a-row>
  169. <a-row :gutter="24" style="margin-top: 20px" id="getWidth">
  170. <a-col :xl="24">
  171. <a-card style="width: 100%" title="运营数据">
  172. <!-- :columns="columns" -->
  173. <a-table
  174. size="middle"
  175. :dataSource="designTopList"
  176. bordered
  177. id="outTable"
  178. :pagination="ipagination"
  179. :loading="designTopLoading"
  180. ref="accountTable"
  181. @change="sort"
  182. :scroll="{ x: scrollX }"
  183. >
  184. <a-table-column title="运营" data-index="userName" :width="120" align="center">
  185. </a-table-column>
  186. <a-table-column title="岗位" data-index="roleName" :width="120" align="center">
  187. </a-table-column>
  188. <a-table-column title="晋升时间" data-index="upTime" align="center">
  189. <template slot-scope="t, r, i">
  190. <span>{{ !!t ? t : '-' }}</span>
  191. </template>
  192. </a-table-column>
  193. <a-table-column :title="onetotalCharge" data-index="1totalCharge" align="center">
  194. </a-table-column>
  195. <a-table-column :title="twototalCharge" data-index="2totalCharge" align="center">
  196. </a-table-column>
  197. <a-table-column :title="threetotalCharge" data-index="3totalCharge" align="center">
  198. </a-table-column>
  199. <a-table-column :title="oneKFCharge" data-index="1KFCharge" align="center" v-if="showKf"> </a-table-column>
  200. <a-table-column :title="twoKFCharge" data-index="2KFCharge" align="center" v-if="showKf"> </a-table-column>
  201. <a-table-column :title="threeKFCharge" data-index="3KFCharge" align="center" v-if="showKf"> </a-table-column>
  202. <a-table-column :title="oneFWCharge" data-index="1FWCharge" align="center"> </a-table-column>
  203. <a-table-column :title="twoFWCharge" data-index="2FWCharge" align="center"> </a-table-column>
  204. <a-table-column :title="threeFWCharge" data-index="3FWCharge" align="center"> </a-table-column>
  205. <a-table-column title="离职时间" data-index="quitTime" align="center">
  206. <template slot-scope="t, r, i">
  207. <span>{{ !!t ? t : '-' }}</span>
  208. </template>
  209. </a-table-column>
  210. </a-table>
  211. </a-card>
  212. </a-col>
  213. </a-row>
  214. </div>
  215. </template>
  216. <script>
  217. import moment from 'moment'
  218. import YoutTable from '@/components/youtTable/YoutTable'
  219. import ChartCard from '@/components/ChartCard'
  220. import Trend from '@/components/Trend'
  221. import { mapGetters } from 'vuex'
  222. import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
  223. import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
  224. const columnsFixd = [
  225. {
  226. title: '广告组名称',
  227. dataIndex: 'unitName',
  228. align: 'center',
  229. scopedSlots: { customRender: 'unitName' },
  230. },
  231. {
  232. title: '封面曝光数',
  233. dataIndex: 'photoShow',
  234. align: 'center',
  235. },
  236. {
  237. title: '封面点击数',
  238. dataIndex: 'photoClick',
  239. align: 'center',
  240. scopedSlots: { customRender: 'photoClick' },
  241. },
  242. {
  243. title: '消耗',
  244. dataIndex: 'cost',
  245. align: 'center',
  246. },
  247. ]
  248. const ksColumns = []
  249. export default {
  250. components: {
  251. YoutTable,
  252. ChartCard,
  253. Trend,
  254. Treeselect,
  255. },
  256. data() {
  257. return {
  258. visible: false, //自定义页面的打开
  259. listNum: [],
  260. spinningMaterialGroupData: false,
  261. scrollX: 0,
  262. ipagination: {
  263. current: 1,
  264. pageSize: 10,
  265. // pageSizeOptions: ['10', '20', '30'],
  266. showTotal: (total, range) => {
  267. return range[0] + '-' + range[1] + ' 共' + total + '条'
  268. },
  269. showQuickJumper: true,
  270. // showSizeChanger: true,
  271. pageSizeOptions: ['10', '30', '50'],
  272. total: 0,
  273. onChange: (current, pageSize) => {
  274. // 切换分页时的回调,
  275. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  276. this.ipagination.current = current
  277. this.ipagination.pageSize = pageSize
  278. this.getTableMediaList()
  279. },
  280. },
  281. tabListNoTitle: [
  282. {
  283. key: '2',
  284. tab: '快手',
  285. },
  286. {
  287. key: '1',
  288. tab: '头条',
  289. },
  290. ],
  291. noTitleKey: '2',
  292. active: 'cost',
  293. groupDisabled: false,
  294. timeShowEchartsStatus: true,
  295. signatureStatus: false,
  296. materialGroupData: {},
  297. accountIndexList: {},
  298. popularVideoList: {},
  299. materialRankValue: 0,
  300. designRankingValue: 1,
  301. designTopLoading: false,
  302. noImg: require('@/assets/noImg.png'),
  303. visibleVideo: false,
  304. videoUrlShow: '',
  305. cost: '0',
  306. spinning: false,
  307. spinningChart: false,
  308. spinningChartPie: false,
  309. loading: false,
  310. chartList: [],
  311. videoList: [],
  312. designTopList: [],
  313. target: '',
  314. order: 'descend',
  315. columns: [...columnsFixd, ...ksColumns], // table的表头
  316. columnsFixd,
  317. dateRanges: {
  318. 今天: [moment(), moment()],
  319. 近三天: [moment().subtract(3, 'days'), moment().subtract(1, 'days')],
  320. 近一周: [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
  321. // 近14天: [moment().subtract(14, 'days'), moment().subtract(1, 'days')],
  322. // 近一月: [moment().subtract(1, 'months'), moment().subtract(1, 'days')],
  323. // 近半年: [moment().subtract(6, 'months'), moment().subtract(1, 'days')],
  324. // 近一年: [moment().subtract(12, 'months'), moment().subtract(1, 'days')],
  325. },
  326. dateValue: [moment(), moment()],
  327. videoType: 0,
  328. labelType: 0,
  329. dataDimension: 'a',
  330. mediaDimension: 'b',
  331. showKf: true,
  332. projectId: null,
  333. dataDimensionValue: null,
  334. quarter: null,
  335. person: null,
  336. post: null,
  337. operationTarget: 'charge',
  338. dataDimensionList: [],
  339. specificLoading: false,
  340. dataType: 0,
  341. accountIdKuaishou: undefined,
  342. accountIdToutiao: undefined,
  343. category: 0,
  344. clientWidth: 0,
  345. resetLoading: false,
  346. searchLoading: false,
  347. spinningPopularVideoList: false,
  348. oneFWCharge: '',
  349. oneJLCharge: '',
  350. oneKFCharge: '',
  351. onetotalCharge: '',
  352. twoFWCharge: '',
  353. twoJLCharge: '',
  354. twoKFCharge: '',
  355. twototalCharge: '',
  356. threeFWCharge: '',
  357. threeJLCharge: '',
  358. threeKFCharge: '',
  359. threetotalCharge: '',
  360. }
  361. },
  362. watch: {
  363. visibleVideo(n, o) {
  364. if (!n) {
  365. stopOtherVideo()
  366. closeAllVideoFun()
  367. }
  368. },
  369. },
  370. methods: {
  371. ...mapGetters(['userInfo']),
  372. filterOption(input, option) {
  373. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  374. },
  375. getQuarter() {
  376. var today = new Date()
  377. var month = today.getMonth() + 1
  378. if (month >= 1 && month <= 3) {
  379. this.quarter = 1
  380. } else if (month >= 4 && month <= 6) {
  381. this.quarter = 2
  382. } else if (month >= 7 && month <= 9) {
  383. this.quarter = 3
  384. } else {
  385. this.quarter = 4
  386. }
  387. },
  388. getData() {
  389. this.spinning = true
  390. this.spinningChart = true
  391. this.active = 'cost'
  392. this.getProjectList()
  393. Promise.all([this.getChartMediaList()])
  394. .then((res) => {
  395. this.spinning = false
  396. this.resetLoading = false
  397. this.searchLoading = false
  398. this.spinningChart = false
  399. })
  400. .catch((error) => {
  401. this.spinning = false
  402. this.resetLoading = false
  403. this.searchLoading = false
  404. // this.$error({
  405. // title: '页面数据加载出错',
  406. // content: '请刷新重试或联系管理员查询'
  407. // });
  408. })
  409. },
  410. getTableMediaList(data) {
  411. this.designTopLoading = true
  412. var params = {}
  413. params.time = this.quarter
  414. params.mediaId = this.mediaDimension === 'a' ? 1 : 2
  415. params.role = this.post
  416. params.userId = this.person
  417. params.pageSize = this.ipagination.pageSize
  418. params.pageNo = this.ipagination.current
  419. if (this.mediaDimension === 'a') {
  420. this.showKf = false
  421. } else {
  422. this.showKf = true
  423. }
  424. if (this.quarter == 1) {
  425. this.oneFWCharge = '1月服务消耗'
  426. this.oneJLCharge = '1月激励消耗'
  427. this.oneKFCharge = '1月框返消耗'
  428. this.onetotalCharge = '1月总消耗'
  429. this.twoFWCharge = '2月服务消耗'
  430. this.twoJLCharge = '2月激励消耗'
  431. this.twoKFCharge = '2月框返消耗'
  432. this.twototalCharge = '2月总消耗'
  433. this.threeFWCharge = '3月服务消耗'
  434. this.threeJLCharge = '3月激励消耗'
  435. this.threeKFCharge = '3月框返消耗'
  436. this.threetotalCharge = '3月总消耗'
  437. } else if (this.quarter == 2) {
  438. this.oneFWCharge = '4月服务消耗'
  439. this.oneJLCharge = '4月激励消耗'
  440. this.oneKFCharge = '4月框返消耗'
  441. this.onetotalCharge = '4月总消耗'
  442. this.twoFWCharge = '5月服务消耗'
  443. this.twoJLCharge = '5月激励消耗'
  444. this.twoKFCharge = '5月框返消耗'
  445. this.twototalCharge = '5月总消耗'
  446. this.threeFWCharge = '6月服务消耗'
  447. this.threeJLCharge = '6月激励消耗'
  448. this.threeKFCharge = '6月框返消耗'
  449. this.threetotalCharge = '6月总消耗'
  450. } else if (this.quarter == 3) {
  451. this.oneFWCharge = '7月服务消耗'
  452. this.oneJLCharge = '7月激励消耗'
  453. this.oneKFCharge = '7月框返消耗'
  454. this.onetotalCharge = '7月总消耗'
  455. this.twoFWCharge = '8月服务消耗'
  456. this.twoJLCharge = '8月激励消耗'
  457. this.twoKFCharge = '8月框返消耗'
  458. this.twototalCharge = '8月总消耗'
  459. this.threeFWCharge = '9月服务消耗'
  460. this.threeJLCharge = '9月激励消耗'
  461. this.threeKFCharge = '9月框返消耗'
  462. this.threetotalCharge = '9月总消耗'
  463. } else {
  464. this.oneFWCharge = '10月服务消耗'
  465. this.oneJLCharge = '10月激励消耗'
  466. this.oneKFCharge = '10月框返消耗'
  467. this.onetotalCharge = '10月总消耗'
  468. this.twoFWCharge = '11月服务消耗'
  469. this.twoJLCharge = '11月激励消耗'
  470. this.twoKFCharge = '11月框返消耗'
  471. this.twototalCharge = '11月总消耗'
  472. this.threeFWCharge = '12月服务消耗'
  473. this.threeJLCharge = '12月激励消耗'
  474. this.threeKFCharge = '12月框返消耗'
  475. this.threetotalCharge = '12月总消耗'
  476. }
  477. this.getAction('/kuaishou/operationReport/queryMonthlyData', params).then((res) => {
  478. this.resetLoading = false
  479. if (res.success) {
  480. this.designTopLoading = false
  481. this.designTopList = res.result.list || []
  482. this.ipagination.total = res.result.total || 0
  483. } else {
  484. this.designTopLoading = false
  485. }
  486. })
  487. },
  488. getProjectList() {
  489. this.specificLoading = true
  490. this.dataDimensionList = []
  491. this.dataDimensionValue = null
  492. this.person = null
  493. this.post = null
  494. return new Promise((resolve, reject) => {
  495. this.getAction(
  496. '/kuaishou/operationReport/getAllOperatorList?mediaId=' + (this.mediaDimension == 'a' ? 1 : 2)
  497. ).then((res) => {
  498. this.specificLoading = false
  499. if (res.success) {
  500. this.dataDimensionList = res.result
  501. resolve(res.result)
  502. } else {
  503. reject(res.message)
  504. }
  505. })
  506. })
  507. },
  508. sort(pagination, filters, sorter, { currentDataSource }) {
  509. this.ipagination.current = pagination.current
  510. this.ipagination.pageSize = pagination.pageSize
  511. // if (sorter.order) {
  512. // this.order = sorter.order ? sorter.order : 'descend'
  513. // this.target = sorter.columnKey
  514. // this.getTableMediaList({
  515. // target: sorter.columnKey,
  516. // order: sorter.order ? sorter.order : 'descend',
  517. // })
  518. // }
  519. },
  520. handleSubmit() {
  521. this.cancel()
  522. this.resetLoading = true
  523. this.ipagination.current = 1
  524. // this.getData()
  525. this.getTableMediaList()
  526. },
  527. resetSubmit() {
  528. this.getQuarter()
  529. this.mediaDimension = 'b'
  530. this.dataDimensionValue = null
  531. this.post = null
  532. this.person = null
  533. this.dataType = 0
  534. this.handleSubmit()
  535. },
  536. //获取echart的值
  537. initEchart(idName, optionName) {
  538. let that = this
  539. const chart = this.$refs[idName]
  540. if (chart) {
  541. echarts.init(document.getElementById(idName)).dispose()
  542. const myChart = echarts.init(document.getElementById(idName))
  543. myChart.setOption(optionName)
  544. window.addEventListener('resize', function () {
  545. that.clientWidth = document.documentElement.clientWidth - 224
  546. myChart.resize()
  547. })
  548. }
  549. },
  550. disabledDate(current) {
  551. return current && current >= moment()
  552. },
  553. },
  554. mounted() {
  555. this.clientWidth = document.documentElement.clientWidth - 224
  556. this.$nextTick(() => {
  557. this.getProjectList()
  558. this.getQuarter()
  559. setTimeout(() => {
  560. this.getTableMediaList()
  561. })
  562. })
  563. },
  564. activated() {
  565. this.$nextTick(() => {
  566. this.clientWidth = document.documentElement.clientWidth - 224
  567. })
  568. },
  569. }
  570. </script>
  571. <style lang="less" scoped>
  572. .materialReport {
  573. .material-report-card-two {
  574. width: 25%;
  575. ::v-deep * {
  576. border: 0;
  577. }
  578. }
  579. .material-report-card {
  580. // height: 220px;
  581. ::v-deep .ant-card-head {
  582. border: none;
  583. }
  584. ::v-deep .ant-card-body {
  585. padding-top: 5px;
  586. }
  587. .report-card-result {
  588. height: 88px;
  589. }
  590. .report-card-money {
  591. font-size: 30px;
  592. font-weight: bold;
  593. }
  594. .report-card-msg {
  595. display: flex;
  596. justify-content: space-between;
  597. font-size: 14px;
  598. margin-top: 20px;
  599. }
  600. .report-card-line {
  601. width: 100%;
  602. height: 1px;
  603. margin-top: 20px;
  604. background: #e8e8e8;
  605. }
  606. .report-card-radio {
  607. display: flex;
  608. justify-content: space-between;
  609. margin-top: 12px;
  610. font-size: 14px;
  611. }
  612. }
  613. .option {
  614. background: white;
  615. padding: 20px;
  616. display: flex;
  617. justify-content: flex-start;
  618. flex-wrap: wrap;
  619. .item {
  620. margin-right: 15px;
  621. margin-bottom: 15px;
  622. height: 32px;
  623. line-height: 32px;
  624. flex-shrink: 0;
  625. span {
  626. margin-right: 10px;
  627. }
  628. }
  629. }
  630. .echart {
  631. margin-top: 20px;
  632. padding: 0 20px 20px;
  633. background: white;
  634. .echart-header {
  635. padding: 20px 0;
  636. font-size: 15px;
  637. font-weight: 600;
  638. }
  639. }
  640. .tableBody {
  641. margin-top: 20px;
  642. }
  643. }
  644. </style>
  645. <style>
  646. .materialReport .card-containers {
  647. overflow: hidden !important;
  648. }
  649. .materialReport .card-containers > .ant-tabs-card > .ant-tabs-content {
  650. margin-top: -16px !important;
  651. }
  652. .materialReport .card-containers > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
  653. background: #fff !important;
  654. }
  655. .materialReport .card-containers > .ant-tabs-card > .ant-tabs-bar {
  656. border-color: #fff !important;
  657. }
  658. .materialReport .card-containers > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
  659. border-color: transparent !important;
  660. background: transparent !important;
  661. }
  662. .materialReport .card-containers > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
  663. border-color: #fff !important;
  664. background: #fff !important;
  665. }
  666. </style>