添加库存报表

src/components/tools/HeaderNotice.vue

@@ -6,7 +6,7 @@
     :arrowPointAtCenter="true"
     overlayClassName="header-notice-wrapper"
     @visibleChange="handleHoverChange"
-    :overlayStyle="{ width: '300px', top: '50px' }"
+    :overlayStyle="{ width: '600px', top: '50px' }"
   >
     <template slot="content">
       <a-spin :spinning="loadding">
@@ -29,46 +29,69 @@
                 </a-list-item-meta>
               </a-list-item>
             </a-list>-->
-            <a-list>
-              <a-list-item
-                :key="index"
-                v-for="(record, index) in announcement1"
-              >
-                <div style="margin-left: 5%; width: 80%">
-                  <p>
-                    <a @click="showAnnouncement(record)">{{ record.titile }}</a>
-                  </p>
-                  <p style="color: rgba(0, 0, 0, 0.45); margin-bottom: 0px">
-                    {{ record.createTime }} 发布
-                  </p>
-                </div>
-                <div style="text-align: right">
-                  <a-tag
-                    @click="showAnnouncement(record)"
-                    v-if="record.priority === 'L'"
-                    color="blue"
-                    >一般消息</a-tag
-                  >
-                  <a-tag
-                    @click="showAnnouncement(record)"
-                    v-if="record.priority === 'M'"
-                    color="orange"
-                    >重要消息</a-tag
+            <a-tabs size="small" class="header_notice">
+              <a-tab-pane tab="房间消息" key="1">
+                <a-list>
+                  <a-list-item
+                      :key="index"
+                      v-for="(record, index) in announcement1"
                   >
-                  <a-tag
-                    @click="showAnnouncement(record)"
-                    v-if="record.priority === 'H'"
-                    color="red"
-                    >紧急消息</a-tag
-                  >
-                </div>
-              </a-list-item>
-              <div style="margin-top: 5px; text-align: center">
-                <a-button @click="toMyAnnouncement()" type="dashed" block
-                  >查看更多</a-button
-                >
-              </div>
-            </a-list>
+                    <div style="margin-left: 5%; width: 80%">
+                      <p>
+                        <a @click="showAnnouncement(record)">{{ record.titile }}</a>
+                      </p>
+                      <p style="color: rgba(0, 0, 0, 0.45); margin-bottom: 0px">
+                        {{ record.createTime }} 发布
+                      </p>
+                    </div>
+                    <div style="text-align: right">
+                      <a-tag
+                          @click="showAnnouncement(record)"
+                          v-if="record.priority === 'L'"
+                          color="blue"
+                      >一般消息</a-tag
+                      >
+                      <a-tag
+                          @click="showAnnouncement(record)"
+                          v-if="record.priority === 'M'"
+                          color="orange"
+                      >重要消息</a-tag
+                      >
+                      <a-tag
+                          @click="showAnnouncement(record)"
+                          v-if="record.priority === 'H'"
+                          color="red"
+                      >紧急消息</a-tag
+                      >
+                    </div>
+                  </a-list-item>
+                  <div style="margin-top: 5px; text-align: center">
+                    <a-button @click="toMyAnnouncement()" type="dashed" block
+                    >查看更多</a-button
+                    >
+                  </div>
+                </a-list>
+              </a-tab-pane>
+              <a-tab-pane tab="门店消息" key="2">
+
+              </a-tab-pane>
+              <a-tab-pane tab="资产消息" key="3">
+
+              </a-tab-pane>
+              <a-tab-pane tab="订单消息" key="4">
+
+              </a-tab-pane>
+              <a-tab-pane tab="商城消息" key="5">
+
+              </a-tab-pane>
+              <a-tab-pane tab="集团消息" key="6">
+
+              </a-tab-pane>
+              <a-tab-pane tab="系统公告" key="7">
+
+              </a-tab-pane>
+              </a-tabs>
+
           </a-tab-pane>
           <a-tab-pane :tab="msg2Title" key="2">
             <a-list>
@@ -426,6 +449,14 @@ export default {
 .header-notice-wrapper {
   top: 50px !important;
 }
+
+.header_notice {
+  .ant-tabs-tab{
+    margin-right: 0px !important;
+    padding-right: 10px !important;
+    padding-left: 10px !important
+  }
+}
 </style>
 <style lang="less" scoped>
 .header-notice {
@@ -436,4 +467,4 @@ export default {
     vertical-align: initial;
   }
 }
-</style>
+</style>

src/views/pos/modules/goodStock/goodsForm.vue

@@ -199,6 +199,7 @@ export default {
     onChange(e) {
       console.log(e);
       this.model.goodType = e[e.length - 1];
+      debugger
       console.log(this.model.goodType);
     },
     handleChange(e, options) {

src/views/report/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <div style="background: #FFFFFF">
+    <a-row>
+      <a-col :span="4" v-for="item in demo">
+        <div class="resport" @click="getResport(item)">{{ item.name }}</div>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {
+  },
+  data() {
+    return {
+      demo: [{
+        name: '货品库存报表',
+        path: '/report/storageAllCollect'
+        },
+        {
+          name: '出库汇总表',
+          path: '/report/storageOutCollect'
+        },
+        {
+          name: '入库汇总表',
+          path: '/report/storageInCollect'
+        },
+        {
+          name: '入库明细表',
+          path: '/report/storageInDetail'
+        },
+        {
+          name: '出库明细表',
+          path: '/report/storageOutDetail'
+        },
+      ]
+    };
+  },
+  methods: {
+    getResport(item) {
+      console.log(item.path)
+      this.$router.push(item.path)
+      this.$router.push()
+    }
+  }
+};
+</script>
+
+<style scoped>
+.main {
+  height: 70% !important;
+}
+
+.resport {
+  background: rgb(245, 245, 245);
+  padding: 20px 0px;
+  text-align: center;
+  display: block;
+  margin: 20px;
+}
+</style>

src/views/report/storageAllCollect.vue

@@ -0,0 +1,75 @@
+<template>
+  <storage-collect-info :is-in="null" :columns="columns" :list="list"></storage-collect-info>
+</template>
+
+<script>
+import storageCollectInfo from './storageCollectInfo'
+export default {
+  name: 'storageAllCollect',
+  components: {
+    storageCollectInfo
+  },
+  data() {
+    return {
+      list: '/kc/kcDepositoryInGoods/storagePage',
+      columns: [
+        {
+          title: '仓库名称',
+          align: 'center',
+          dataIndex: 'depositoryName',
+          width: 80
+        },
+        {
+          title: '商品名称',
+          align: 'center',
+          dataIndex: 'goodName',
+          width: 80,
+          // customRender: function (text, record) {
+          //   return text == null ? '--' : text
+          // },
+        },
+        {
+          title: '商品分类',
+          align: 'center',
+          dataIndex: 'goodTypeName',
+          width: 80,
+          // customRender: function (text, record) {
+          //   return text == null ? '--' : text
+          // },
+        },
+        {
+          title: '库存量',
+          align: 'center',
+          dataIndex: 'num',
+          width: 80,
+        },
+        {
+          title: '单位',
+          align: 'center',
+          dataIndex: 'goodUnitName',
+          width: 80
+        },
+        {
+          title: '预警状态',
+          align: 'center',
+          width: 80,
+          customRender(text, record) {
+            return record.stockWarning >= record.num ? '预警' : '正常'
+          }
+        }
+      ]
+    }
+
+  },
+  created() {
+  },
+  methods: {
+  }
+};
+</script>
+
+<style scoped>
+.main {
+  height: 70% !important;
+}
+</style>

src/views/report/storageCollectInfo.vue

@@ -0,0 +1,297 @@
+<template>
+  <a-card style="width: 100%;">
+    <!-- 查询区域 -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline">
+        <a-row :gutter="24">
+          <a-col :span="3">
+            <a-form-item label="">
+              <a-input
+                  :allowClear="true"
+                  placeholder="商品名称"
+                v-model="queryParam.goodsName"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :span="3">
+            <a-form-item label="">
+              <a-select
+                v-model="queryParam.depositoryId"
+                style="width: 100%"
+                :allowClear="true"
+                placeholder="仓库">
+                <a-select-option
+                  v-for="(item, index) in depositoryList"
+                  :key="index"
+                  :value="item.id">
+                  {{ item.name }}
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="3">
+            <a-form-item label="" v-model="queryParam.goodTypeId">
+              <a-cascader :options="stockTypeList " @change="stockTypeChange" :field-names="{ label: 'name', value: 'id', children: 'children' }" placeholder="商品类别" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="3" v-if="this.isIn == null">
+            <a-form-item label="">
+              <a-select
+                  v-model="queryParam.warningState"
+                  style="width: 100%"
+                  :allowClear="true"
+                  placeholder="预警状态">
+                <a-select-option value="1">正常</a-select-option>
+                <a-select-option value="2">预警</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="9" v-else>
+            <a-form-item label="">
+              <a-radio-group v-model="queryParam.timeFrame">
+                <a-radio-button value="1">今日</a-radio-button>
+                <a-radio-button value="2">昨日</a-radio-button>
+                <a-radio-button value="3">本周</a-radio-button>
+                <a-radio-button value="4">其他</a-radio-button>
+              </a-radio-group>
+              <a-range-picker v-if="queryParam.timeFrame === '4'" v-model="chooseTime" />
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="8">
+            <span
+              style="float: left; overflow: hidden"
+              class="table-page-search-submitButtons"
+            >
+              <a-button
+                type="primary"
+                @click="loadDate"
+                icon="search"
+              >查询</a-button
+              >
+              <a-button
+                type="primary"
+                icon="reload"
+                style="margin-left: 8px"
+              >重置</a-button
+              >
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <!-- 查询区域-END -->
+    <!-- table区域-begin -->
+    <div>
+
+      <a-table
+        ref="table"
+        size="middle"
+        :scroll="{ x: true }"
+        bordered
+        rowKey="id"
+        :columns="columns"
+        :dataSource="goodDate"
+        :pagination="ipagination"
+        class="storage_collect"
+        @change="pageChange">
+        <template #footer >
+          <a-table
+              ref="table"
+              size="middle"
+              :bordered="true"
+              :pagination="false"
+              :columns="columns"
+              :dataSource="totalData"
+              :showHeader="false"
+              style="padding: 0px"
+          ></a-table>
+
+          <template v-if="columns.dataIndex === 'num'">
+            <a>1</a>
+          </template>
+        </template>
+      </a-table>
+    </div>
+  </a-card>
+</template>
+
+<script>
+import { getAction } from '@api/manage'
+import moment from 'moment'
+export default {
+  name: 'StorageCollectInfo',
+  components: {
+  },
+  props: {
+    // 是否是出库。true 入库，false 出库，null 全部
+    isIn: {
+      type: Boolean,
+      default: false,
+      required: false
+    },
+    columns: {
+      type: Array,
+      default: () => [],
+      required: false
+    },
+    list: {
+      type: String,
+      default: '',
+      required: false
+    }
+  },
+  data() {
+    return {
+
+      goodDate: [],
+      depositoryList: [],
+      stockTypeList: [],
+      queryParam: {
+        timeFrame: '1',
+        startTime: '',
+        endTime: '',
+        goodTypeId: ''
+      },
+      totalData: [
+        {
+          depositoryName: '合计',
+          allMoney: 0
+        }
+      ],
+
+      chooseTime: [],
+      // 分页参数
+      ipagination: {
+        current: 1,
+        pageSize: 10,
+        pageSizeOptions: ['10', '20', '30'],
+        showTotal: (total, range) => {
+          return range[0] + '-' + range[1] + ' 共' + total + '条'
+        },
+        showQuickJumper: true,
+        showSizeChanger: true,
+        total: 0
+      },
+
+      url: {
+        delete: '/kc/kcDepositoryInGoods/delete',
+        deleteBatch: '/kc/kcDepositoryInGoods/deleteBatch',
+        exportXlsUrl: '/kc/kcDepositoryInGoods/exportXls',
+        importExcelUrl: '/kc/kcDepositoryInGoods/importExcel'
+      },
+
+    }
+  },
+  created() {
+    this.loadDate()
+    this.loadDepository()
+    this.loadStockType()
+  },
+  methods: {
+    loadDate() {
+      if (this.isIn != null) {
+        if (this.queryParam.timeFrame === '4' && this.chooseTime.length === 0) {
+          this.$message.warning('请选择时间')
+          return
+        }
+        this.getTimeFrame()
+      }
+      let params = {
+        pageSize: this.ipagination.pageSize,
+        pageNo: this.ipagination.current,
+        goodsName: this.queryParam.goodsName,
+        depositoryId: this.queryParam.depositoryId,
+        goodTypeId: this.queryParam.goodTypeId,
+        startTime: this.queryParam.startTime,
+        endTime: this.queryParam.endTime,
+        isIn: this.isIn,
+        warningState: this.queryParam.warningState
+      }
+      getAction(this.list, params).then((res) => {
+        if (!res.success) {
+          this.$message.warning('查询失败')
+          return
+        }
+        this.goodDate = res.result.records
+        let allNum = this.goodDate.reduce((accumulator, e) => accumulator + e.num, 0)
+        let allMoney = this.goodDate.filter(e => e.price != null && e.num != null).reduce((accumulator, e) => accumulator + e.num * e.price, 0)
+        // debugger
+        console.log(this.goodDate)
+        console.log(allMoney, 'allMoney')
+        this.$set(this.totalData[0], 'num', allNum)
+        this.$set(this.totalData[0], 'price', allMoney)
+        // this.$set(this.totalDate[0], 'num', allNum)
+        this.ipagination.pageNo = res.result.current
+        this.ipagination.total = res.result.total
+        this.expandedRowKeys = []
+      }).finally(() => {
+        // this.loading = false
+      })
+    },
+    loadDepository() {
+      let params = {
+        pageSize: 9999,
+        pageNo: 1
+      }
+      getAction('/kc/kcDepository/list', params).then((res) => {
+        if (!res.success) {
+          this.$message.warning('查询失败')
+          return
+        }
+        this.depositoryList = res.result.records
+      })
+    },
+    loadStockType() {
+      let params = {
+        pageSize: 9999,
+        pageNo: 1
+      }
+      getAction('/rooms/cesStockType/tree', params).then((res) => {
+        if (!res.success) {
+          this.$message.warning('查询失败')
+          return
+        }
+        this.stockTypeList = res.result
+        console.log(this.stockTypeList)
+      })
+    },
+    stockTypeChange(e) {
+      console.log(e, 'e')
+      this.queryParam.goodTypeId = e[e.length - 1]
+      console.log(this.queryParam.goodTypeId)
+    },
+    // 获取时间范围
+    getTimeFrame() {
+      if (this.queryParam.timeFrame === '1') {
+        // 今天
+        this.queryParam.startTime = moment().format('YYYY-MM-DD')
+        this.queryParam.endTime = moment().add(1, 'days').format('YYYY-MM-DD')
+      } else if (this.queryParam.timeFrame === '2') {
+        // 昨天
+        this.queryParam.endTime = moment().format('YYYY-MM-DD')
+        this.queryParam.startTime = moment().subtract(1, 'days').format('YYYY-MM-DD')
+      } else if (this.queryParam.timeFrame === '3') {
+        // 本周
+        this.queryParam.startTime = moment().weekday(0).format('YYYY-MM-DD')
+        this.queryParam.endTime = moment().weekday(6).format('YYYY-MM-DD')
+      } else if (this.queryParam.timeFrame === '4') {
+        // 自定义时间
+        this.queryParam.startTime = this.chooseTime[0].format('YYYY-MM-DD')
+        this.queryParam.endTime = this.chooseTime[1].format('YYYY-MM-DD')
+      }
+    },
+    pageChange(page) {
+      console.log(page)
+      this.ipagination = page
+      this.loadDate()
+    },
+
+  }
+}
+</script>
+
+<style>
+.storage_collect .ant-table-footer {
+  padding: 0px 0px !important;
+}
+</style>

src/views/report/storageInCollect.vue

@@ -0,0 +1,72 @@
+<template>
+  <storage-collect-info :is-in="true" :columns="columns" :list="list"></storage-collect-info>
+</template>
+
+<script>
+import storageCollectInfo from './storageCollectInfo'
+import { getAction } from '@api/manage'
+export default {
+  name: 'storageInCollect',
+  components: {
+    storageCollectInfo
+  },
+  data() {
+    return {
+      list: '/kc/kcDepositoryInGoods/storagePage',
+      columns: [
+        {
+          title: '仓库名称',
+          align: 'center',
+          dataIndex: 'depositoryName',
+          width: 80
+        },
+        {
+          title: '商品名称',
+          align: 'center',
+          dataIndex: 'goodName',
+          width: 80
+        },
+        {
+          title: '商品分类',
+          align: 'center',
+          dataIndex: 'goodTypeName',
+          width: 80
+
+        },
+        {
+          title: '库存量',
+          align: 'center',
+          dataIndex: 'num',
+          width: 80
+        },
+        {
+          title: '单位',
+          align: 'center',
+          dataIndex: 'goodUnitName',
+          width: 80
+        },
+        // {
+        //   title: '预警状态',
+        //   align: 'center',
+        //   dataIndex: 'id',
+        //   customRender(text, record) {
+        //     return record.stockWarning >= record.num ? '预警' : '正常'
+        //   }
+        // }
+      ],
+    }
+
+  },
+  created() {
+
+  },
+  methods: {
+  }
+};
+</script>
+
+<style scoped>
+.main {
+  height: 70% !important;
+}
+</style>

src/views/report/storageInDetail.vue

@@ -0,0 +1,131 @@
+<template>
+  <storage-collect-info :is-in="true" :columns="columns" :list="list"></storage-collect-info>
+</template>
+
+<script>
+import storageCollectInfo from './storageCollectInfo'
+import { getAction } from '@api/manage'
+export default {
+  name: 'storageInCollect',
+  components: {
+    storageCollectInfo
+  },
+  data() {
+    return {
+      list: '/kc/kcDepositoryInGoods/storageDetailPage',
+      columns: [
+        {
+          title: '仓库',
+          align: 'center',
+          dataIndex: 'depositoryName',
+          width: 80
+        },
+        {
+          title: '出库类型',
+          align: 'center',
+          dataIndex: '',
+          width: 80
+        },
+        {
+          title: '商品名称',
+          align: 'center',
+          dataIndex: 'goodName',
+          width: 80
+        },
+        {
+          title: '商品规格',
+          align: 'center',
+          dataIndex: 'spec',
+          width: 80
+        },
+        {
+          title: '商品分类',
+          align: 'center',
+          dataIndex: 'goodTypeName',
+          width: 80
+        },
+        {
+          title: '单位',
+          align: 'center',
+          dataIndex: 'goodUnitName',
+          width: 80
+        },
+        {
+          title: '入库时间',
+          align: 'center',
+          dataIndex: 'createTime',
+          width: 80
+        },
+        {
+          title: '单价',
+          align: 'center',
+          dataIndex: 'price',
+          width: 80,
+          customRender(text, record) {
+            if(record.depositoryName !== '合计') {
+              return text
+            }
+          }
+        },
+        {
+          title: '入库数量',
+          align: 'center',
+          dataIndex: 'num',
+          width: 80
+        },
+        {
+          title: '入库金额',
+          align: 'center',
+          width: 80,
+          customRender(text, record) {
+            if(record.price !== undefined) {
+              return record.price * record.num
+            }
+          }
+        },
+        {
+          title: '申请人',
+          align: 'center',
+          dataIndex: 'createAt',
+          width: 80
+        },
+        {
+          title: '审批人',
+          align: 'center',
+          dataIndex: 'verifyAt',
+          width: 80
+        }
+        // {
+        //   title: '预警状态',
+        //   align: 'center',
+        //   dataIndex: 'id',
+        //   customRender(text, record) {
+        //     return record.stockWarning >= record.num ? '预警' : '正常'
+        //   }
+        // }
+      ]
+    }
+
+  },
+  created() {
+    getAction('/kc/kcStock/storageTypeList', {}).then((res) => {
+      if (res.success) {
+        this.storageTypeList = res.result;
+        let map = new Map()
+        res.result.forEach(e => {
+          map.set(e.value, e.text)
+        })
+        this.storageTypeMap = map
+      }
+    });
+  },
+  methods: {
+  }
+};
+</script>
+
+<style scoped>
+.main {
+  height: 70% !important;
+}
+</style>

src/views/report/storageOutCollect.vue

@@ -0,0 +1,72 @@
+<template>
+  <storage-collect-info :is-in="false" :columns="columns" :list="list"></storage-collect-info>
+</template>
+
+<script>
+import storageCollectInfo from './storageCollectInfo'
+export default {
+  name: 'storageOutCollect',
+  components: {
+    storageCollectInfo
+  },
+  data() {
+    return {
+      list: '/kc/kcDepositoryInGoods/storagePage',
+      columns: [
+        {
+          title: '仓库名称',
+          align: 'center',
+          dataIndex: 'depositoryName',
+          width: 80
+        },
+        {
+          title: '商品名称',
+          align: 'center',
+          dataIndex: 'goodName',
+          width: 80
+        },
+        {
+          title: '商品分类',
+          align: 'center',
+          dataIndex: 'goodTypeName',
+          width: 80
+        },
+        {
+          title: '库存量',
+          align: 'center',
+          dataIndex: 'num',
+          width: 80,
+          customRender(text, record) {
+            return -text
+          }
+        },
+        {
+          title: '单位',
+          align: 'center',
+          dataIndex: 'goodUnitName',
+          width: 80
+        },
+        // {
+        //   title: '预警状态',
+        //   align: 'center',
+        //   dataIndex: 'id',
+        //   customRender(text, record) {
+        //     return record.stockWarning >= record.num ? '预警' : '正常'
+        //   }
+        // }
+      ],
+    }
+
+  },
+  created() {
+  },
+  methods: {
+  }
+};
+</script>
+
+<style scoped>
+.main {
+  height: 70% !important;
+}
+</style>

src/views/report/storageOutDetail.vue

@@ -0,0 +1,110 @@
+<template>
+  <storage-collect-info :is-in="false" :columns="columns" :list="list"></storage-collect-info>
+</template>
+
+<script>
+import storageCollectInfo from './storageCollectInfo'
+import { getAction } from '@api/manage'
+export default {
+  name: 'storageInCollect',
+  components: {
+    storageCollectInfo
+  },
+  data() {
+    return {
+      list: '/kc/kcDepositoryInGoods/storageDetailPage',
+      columns: [
+        {
+          title: '仓库',
+          align: 'center',
+          dataIndex: 'depositoryName',
+          width: 80
+        },
+        {
+          title: '出库类型',
+          align: 'center',
+          dataIndex: 'stockType',
+          width: 80,
+        },
+        {
+          title: '商品名称',
+          align: 'center',
+          dataIndex: 'goodName',
+          width: 80
+        },
+        {
+          title: '商品规格',
+          align: 'center',
+          dataIndex: 'spec',
+          width: 80
+        },
+        {
+          title: '商品分类',
+          align: 'center',
+          dataIndex: 'goodTypeName',
+          width: 80
+        },
+        {
+          title: '单位',
+          align: 'center',
+          dataIndex: 'goodUnitName',
+          width: 80
+        },
+        {
+          title: '出库时间',
+          align: 'center',
+          dataIndex: 'createTime',
+          width: 80,
+        },
+        {
+          title: '单价',
+          align: 'center',
+          dataIndex: 'price',
+          width: 80
+        },
+        {
+          title: '出库数量',
+          align: 'center',
+          dataIndex: 'num',
+          width: 80,
+          customRender(text, record) {
+            return -text
+          }
+        },
+        {
+          title: '申请人',
+          align: 'center',
+          dataIndex: 'createAt',
+          width: 80
+        },
+        {
+          title: '审批人',
+          align: 'center',
+          dataIndex: 'verifyAt',
+          width: 80
+        },
+        // {
+        //   title: '预警状态',
+        //   align: 'center',
+        //   dataIndex: 'id',
+        //   customRender(text, record) {
+        //     return record.stockWarning >= record.num ? '预警' : '正常'
+        //   }
+        // }
+      ],
+
+    }
+
+  },
+  created() {
+  },
+  methods: {
+  }
+};
+</script>
+
+<style scoped>
+.main {
+  height: 70% !important;
+}
+</style>