!35 1111

Merge pull request !35 from 啊啊啊啊杰/auto-8700219-develop-1629797892887

src/api/course/course.js

@@ -0,0 +1,53 @@
+import request from '@/utils/request'
+
+const projectApi = {
+//   add: 'sys/menu/add',
+//   get: 'sys/menu/get',
+//   update: 'sys/menu/update',
+//   del: 'sys/menu/delete',
+//   updateStatus: 'sys/menu/updateStatus',
+  list: 'course/pageList'
+}
+
+// export function menuAdd (params) {
+//   return request({
+//     url: menuApi.add,
+//     method: 'post',
+//     data: params
+//   })
+// }
+// export function menuGet (params) {
+//   return request({
+//     url: menuApi.get,
+//     method: 'post',
+//     data: params
+//   })
+// }
+// export function menuUpdate (params) {
+//   return request({
+//     url: menuApi.update,
+//     method: 'post',
+//     data: params
+//   })
+// }
+// export function menuDelete (params) {
+//   return request({
+//     url: menuApi.del,
+//     method: 'post',
+//     data: params
+//   })
+// }
+export function getCourseList (params) {
+  return request({
+    url: courseApi.list,
+    method: 'get',
+    params: params
+  })
+}
+// export function menuUpdateStatus (params) {
+//   return request({
+//     url: menuApi.updateStatus,
+//     method: 'post',
+//     data: params
+//   })
+// }

src/config/router.config.js

@@ -21,13 +21,13 @@ export const asyncRouterMap = [
         name: 'dashboard',
         redirect: '/dashboard/workplace',
         component: RouteView,
-        meta: { title: 'menu.dashboard', keepAlive: true, icon: bxAnaalyse, permission: [ 'dashboard' ] },
+        meta: { title: 'menu.dashboard', keepAlive: true, icon: bxAnaalyse, permission: ['dashboard'] },
         children: [
           {
             path: '/dashboard/workplace',
             name: 'Workplace',
             component: () => import('@/views/dashboard/Workplace'),
-            meta: { title: 'menu.dashboard.workplace', keepAlive: true, permission: [ 'dashboard' ] }
+            meta: { title: 'menu.dashboard.workplace', keepAlive: true, permission: ['dashboard'] }
           }
         ]
       },
@@ -37,13 +37,13 @@ export const asyncRouterMap = [
         name: 'security',
         redirect: '/security/user',
         component: RouteView,
-        meta: { title: '系统设置', keepAlive: true, icon: bxAnaalyse, permission: [ 'security' ] },
+        meta: { title: '系统设置', keepAlive: true, icon: bxAnaalyse, permission: ['security'] },
         children: [
           {
             path: '/security/user',
             name: 'SecurityUser',
             component: () => import('@/views/security/user/UserList'),
-            meta: { title: '用户管理', keepAlive: true, permission: [ 'security' ] }
+            meta: { title: '用户管理', keepAlive: true, permission: ['security'] }
           },
           {
             path: '/security/role',
@@ -76,25 +76,52 @@ export const asyncRouterMap = [
         path: '/project',
         redirect: '/project/projectList',
         component: RouteView,
-        meta: { title: '项目管理', icon: bxAnaalyse, permission: [ 'from' ] },
+        meta: { title: '项目管理', icon: bxAnaalyse, permission: ['from'] },
         children: [
           {
             path: '/project/projectList',
             name: 'projectList',
             component: () => import('@/views/project/ProjectList'),
-            meta: { title: '自主项目', keepAlive: true, permission: [ 'form' ] }
+            meta: { title: '自主项目', keepAlive: true, permission: ['form'] }
           },
           {
             path: '/form/step-form',
             name: 'StepForm',
             component: () => import('@/views/form/stepForm/StepForm'),
-            meta: { title: '系统推荐', keepAlive: true, permission: [ 'form' ] }
+            meta: { title: '系统推荐', keepAlive: true, permission: ['form'] }
           },
           {
             path: '/form/advanced-form',
             name: 'AdvanceForm',
             component: () => import('@/views/form/advancedForm/AdvancedForm'),
-            meta: { title: '终端培训', keepAlive: true, permission: [ 'form' ] }
+            meta: { title: '终端培训', keepAlive: true, permission: ['form'] }
+          }
+        ]
+      },
+      // 课程管理
+      {
+        path: '/course',
+        redirect: '/course/courseList',
+        component: RouteView,
+        meta: { title: '课程管理', icon: bxAnaalyse, permission: ['from'] },
+        children: [
+          {
+            path: '/course/courseList',
+            name: 'courseList',
+            component: () => import('@/views/course/CourseList'),
+            meta: { title: '课程项目', keepAlive: true, permission: ['form'] }
+          },
+          {
+            path: '/form/step-form',
+            name: 'StepForm',
+            component: () => import('@/views/form/stepForm/StepForm'),
+            meta: { title: '系统推荐', keepAlive: true, permission: ['form'] }
+          },
+          {
+            path: '/form/advanced-form',
+            name: 'AdvanceForm',
+            component: () => import('@/views/form/advancedForm/AdvancedForm'),
+            meta: { title: '终端培训', keepAlive: true, permission: ['form'] }
           }
         ]
       },
@@ -103,25 +130,25 @@ export const asyncRouterMap = [
         path: '/form',
         redirect: '/form/base-form',
         component: RouteView,
-        meta: { title: '表单页', icon: 'form', permission: [ 'form' ] },
+        meta: { title: '表单页', icon: 'form', permission: ['form'] },
         children: [
           {
             path: '/form/base-form',
             name: 'BaseForm',
             component: () => import('@/views/form/basicForm/Index'),
-            meta: { title: '基础表单', keepAlive: true, permission: [ 'form' ] }
+            meta: { title: '基础表单', keepAlive: true, permission: ['form'] }
           },
           {
             path: '/form/step-form',
             name: 'StepForm',
             component: () => import('@/views/form/stepForm/StepForm'),
-            meta: { title: '分步表单', keepAlive: true, permission: [ 'form' ] }
+            meta: { title: '分步表单', keepAlive: true, permission: ['form'] }
           },
           {
             path: '/form/advanced-form',
             name: 'AdvanceForm',
             component: () => import('@/views/form/advancedForm/AdvancedForm'),
-            meta: { title: '高级表单', keepAlive: true, permission: [ 'form' ] }
+            meta: { title: '高级表单', keepAlive: true, permission: ['form'] }
           }
         ]
       },
@@ -132,51 +159,51 @@ export const asyncRouterMap = [
         name: 'list',
         component: RouteView,
         redirect: '/list/table-list',
-        meta: { title: '列表页', icon: 'table', permission: [ 'table' ] },
+        meta: { title: '列表页', icon: 'table', permission: ['table'] },
         children: [
           {
             path: '/list/table-list/:pageNo([1-9]\\d*)?',
             name: 'TableListWrapper',
             hideChildrenInMenu: true, // 强制显示 MenuItem 而不是 SubMenu
             component: () => import('@/views/list/TableList'),
-            meta: { title: '查询表格', keepAlive: true, permission: [ 'table' ] }
+            meta: { title: '查询表格', keepAlive: true, permission: ['table'] }
           },
           {
             path: '/list/basic-list',
             name: 'BasicList',
             component: () => import('@/views/list/BasicList'),
-            meta: { title: '标准列表', keepAlive: true, permission: [ 'table' ] }
+            meta: { title: '标准列表', keepAlive: true, permission: ['table'] }
           },
           {
             path: '/list/card',
             name: 'CardList',
             component: () => import('@/views/list/CardList'),
-            meta: { title: '卡片列表', keepAlive: true, permission: [ 'table' ] }
+            meta: { title: '卡片列表', keepAlive: true, permission: ['table'] }
           },
           {
             path: '/list/search',
             name: 'SearchList',
             component: () => import('@/views/list/search/SearchLayout'),
             redirect: '/list/search/article',
-            meta: { title: '搜索列表', keepAlive: true, permission: [ 'table' ] },
+            meta: { title: '搜索列表', keepAlive: true, permission: ['table'] },
             children: [
               {
                 path: '/list/search/article',
                 name: 'SearchArticles',
                 component: () => import('../views/list/search/Article'),
-                meta: { title: '搜索列表（文章）', permission: [ 'table' ] }
+                meta: { title: '搜索列表（文章）', permission: ['table'] }
               },
               {
                 path: '/list/search/project',
                 name: 'SearchProjects',
                 component: () => import('../views/list/search/Projects'),
-                meta: { title: '搜索列表（项目）', permission: [ 'table' ] }
+                meta: { title: '搜索列表（项目）', permission: ['table'] }
               },
               {
                 path: '/list/search/application',
                 name: 'SearchApplications',
                 component: () => import('../views/list/search/Applications'),
-                meta: { title: '搜索列表（应用）', permission: [ 'table' ] }
+                meta: { title: '搜索列表（应用）', permission: ['table'] }
               }
             ]
           }
@@ -188,19 +215,19 @@ export const asyncRouterMap = [
         name: 'profile',
         component: RouteView,
         redirect: '/profile/basic',
-        meta: { title: '详情页', icon: 'profile', permission: [ 'profile' ] },
+        meta: { title: '详情页', icon: 'profile', permission: ['profile'] },
         children: [
           {
             path: '/profile/basic',
             name: 'ProfileBasic',
             component: () => import('@/views/profile/basic/Index'),
-            meta: { title: '基础详情页', permission: [ 'profile' ] }
+            meta: { title: '基础详情页', permission: ['profile'] }
           },
           {
             path: '/profile/advanced',
             name: 'ProfileAdvanced',
             component: () => import('@/views/profile/advanced/Advanced'),
-            meta: { title: '高级详情页', permission: [ 'profile' ] }
+            meta: { title: '高级详情页', permission: ['profile'] }
           }
         ]
       },
@@ -210,19 +237,19 @@ export const asyncRouterMap = [
         name: 'result',
         component: RouteView,
         redirect: '/result/success',
-        meta: { title: '结果页', icon: 'check-circle-o', permission: [ 'result' ] },
+        meta: { title: '结果页', icon: 'check-circle-o', permission: ['result'] },
         children: [
           {
             path: '/result/success',
             name: 'ResultSuccess',
             component: () => import(/* webpackChunkName: "result" */ '@/views/result/Success'),
-            meta: { title: '成功', keepAlive: false, hiddenHeaderContent: true, permission: [ 'result' ] }
+            meta: { title: '成功', keepAlive: false, hiddenHeaderContent: true, permission: ['result'] }
           },
           {
             path: '/result/fail',
             name: 'ResultFail',
             component: () => import(/* webpackChunkName: "result" */ '@/views/result/Error'),
-            meta: { title: '失败', keepAlive: false, hiddenHeaderContent: true, permission: [ 'result' ] }
+            meta: { title: '失败', keepAlive: false, hiddenHeaderContent: true, permission: ['result'] }
           }
         ]
       },
@@ -232,25 +259,25 @@ export const asyncRouterMap = [
         name: 'exception',
         component: RouteView,
         redirect: '/exception/403',
-        meta: { title: '异常页', icon: 'warning', permission: [ 'exception' ] },
+        meta: { title: '异常页', icon: 'warning', permission: ['exception'] },
         children: [
           {
             path: '/exception/403',
             name: 'Exception403',
             component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/403'),
-            meta: { title: '403', permission: [ 'exception' ] }
+            meta: { title: '403', permission: ['exception'] }
           },
           {
             path: '/exception/404',
             name: 'Exception404',
             component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404'),
-            meta: { title: '404', permission: [ 'exception' ] }
+            meta: { title: '404', permission: ['exception'] }
           },
           {
             path: '/exception/500',
             name: 'Exception500',
             component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/500'),
-            meta: { title: '500', permission: [ 'exception' ] }
+            meta: { title: '500', permission: ['exception'] }
           }
         ]
       },
@@ -260,19 +287,19 @@ export const asyncRouterMap = [
         component: RouteView,
         redirect: '/account/center',
         name: 'account',
-        meta: { title: '个人页', icon: 'user', keepAlive: true, permission: [ 'user' ] },
+        meta: { title: '个人页', icon: 'user', keepAlive: true, permission: ['user'] },
         children: [
           {
             path: '/account/center',
             name: 'center',
             component: () => import('@/views/account/center/Index'),
-            meta: { title: '个人中心', keepAlive: true, permission: [ 'user' ] }
+            meta: { title: '个人中心', keepAlive: true, permission: ['user'] }
           },
           {
             path: '/account/settings',
             name: 'settings',
             component: () => import('@/views/account/settings/Index'),
-            meta: { title: '个人设置', hideHeader: true, permission: [ 'user' ] },
+            meta: { title: '个人设置', hideHeader: true, permission: ['user'] },
             redirect: '/account/settings/base',
             hideChildrenInMenu: true,
             children: [
@@ -280,31 +307,31 @@ export const asyncRouterMap = [
                 path: '/account/settings/base',
                 name: 'BaseSettings',
                 component: () => import('@/views/account/settings/BaseSetting'),
-                meta: { title: '基本设置', hidden: true, permission: [ 'user' ] }
+                meta: { title: '基本设置', hidden: true, permission: ['user'] }
               },
               {
                 path: '/account/settings/security',
                 name: 'SecuritySettings',
                 component: () => import('@/views/account/settings/Security'),
-                meta: { title: '安全设置', hidden: true, keepAlive: true, permission: [ 'user' ] }
+                meta: { title: '安全设置', hidden: true, keepAlive: true, permission: ['user'] }
               },
               {
                 path: '/account/settings/custom',
                 name: 'CustomSettings',
                 component: () => import('@/views/account/settings/Custom'),
-                meta: { title: '个性化设置', hidden: true, keepAlive: true, permission: [ 'user' ] }
+                meta: { title: '个性化设置', hidden: true, keepAlive: true, permission: ['user'] }
               },
               {
                 path: '/account/settings/binding',
                 name: 'BindingSettings',
                 component: () => import('@/views/account/settings/Binding'),
-                meta: { title: '账户绑定', hidden: true, keepAlive: true, permission: [ 'user' ] }
+                meta: { title: '账户绑定', hidden: true, keepAlive: true, permission: ['user'] }
               },
               {
                 path: '/account/settings/notification',
                 name: 'NotificationSettings',
                 component: () => import('@/views/account/settings/Notification'),
-                meta: { title: '新消息通知', hidden: true, keepAlive: true, permission: [ 'user' ] }
+                meta: { title: '新消息通知', hidden: true, keepAlive: true, permission: ['user'] }
               }
             ]
           }
@@ -314,19 +341,19 @@ export const asyncRouterMap = [
         path: '/other',
         name: 'otherPage',
         component: RouteView,
-        meta: { title: '其他组件', icon: 'slack', permission: [ 'dashboard' ] },
+        meta: { title: '其他组件', icon: 'slack', permission: ['dashboard'] },
         redirect: '/other/icon-selector',
         children: [
           {
             path: '/other/icon-selector',
             name: 'TestIconSelect',
             component: () => import('@/views/other/IconSelectorView'),
-            meta: { title: 'IconSelector', icon: 'tool', keepAlive: true, permission: [ 'dashboard' ] }
+            meta: { title: 'IconSelector', icon: 'tool', keepAlive: true, permission: ['dashboard'] }
           },
           {
             path: '/other/list',
             component: RouteView,
-            meta: { title: '业务布局', icon: 'layout', permission: [ 'support' ] },
+            meta: { title: '业务布局', icon: 'layout', permission: ['support'] },
             redirect: '/other/list/tree-list',
             children: [
               {
@@ -423,7 +450,7 @@ export const constantRouterMap = [
         path: 'dictionaryItem/list/:id',
         name: 'DictionaryItemList',
         component: () => import('@/views/sys/dictionaryItem/DictionaryItemList'),
-        meta: { title: '词典项', keepAlive: true, permission: [ 'dictionaryItem' ] }
+        meta: { title: '词典项', keepAlive: true, permission: ['dictionaryItem'] }
       }
     ]
   },

src/views/course/CourseList.vue

@@ -0,0 +1,286 @@
+<template>
+  <div>
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline">
+        <a-row :gutter="48">
+          <a-col :md="8" :sm="24">
+            <a-form-item label="项目名">
+              <a-input v-model="queryParam.projectName" style="width: 100%" />
+            </a-form-item>
+          </a-col>
+          <a-col :md="8" :sm="24">
+            <a-form-item label="项目状态">
+              <a-select v-model="queryParam.status" placeholder="请选择" default-value="null" weight="20px">
+                <a-select-option value="null">全部</a-select-option>
+                <a-select-option value="1">运行中</a-select-option>
+                <a-select-option value="2">已结束</a-select-option>
+                <a-select-option value="1">未发布</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :md="8" :sm="24">
+            <a-form-item label="开始时间">
+              <a-date-picker v-model="queryParam.stateDate" style="width: 100%" placeholder="请输入开始时间" />
+            </a-form-item>
+          </a-col>
+          <a-col :md="8" :sm="24">
+            <a-form-item label="结束时间">
+              <a-date-picker v-model="queryParam.endDate" style="width: 100%" placeholder="请输入结束时间" />
+            </a-form-item>
+          </a-col>
+          <a-col :md="8" :sm="24">
+            <a-form-item label="培训方式">
+              <a-select v-model="queryParam.trainWay" placeholder="请选择" default-value="null" weight="20px">
+                <a-select-option value="null">全部</a-select-option>
+                <a-select-option value="1">培训</a-select-option>
+                <a-select-option value="2">考试</a-select-option>
+                <a-select-option value="3">培训-练习</a-select-option>
+                <a-select-option value="4">培训-练习-考试</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <!-- <template v-if="advanced">
+            <a-col :md="8" :sm="24">
+              <a-form-item label="调用次数">
+                <a-input-number v-model="queryParam.callNo" style="width: 100%" />
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item label="更新日期">
+                <a-date-picker v-model="queryParam.date" style="width: 100%" placeholder="请输入更新日期" />
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item label="使用状态">
+                <a-select v-model="queryParam.useStatus" placeholder="请选择" default-value="0">
+                  <a-select-option value="0">全部</a-select-option>
+                  <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 :md="8" :sm="24">
+              <a-form-item label="使用状态">
+                <a-select placeholder="请选择" default-value="0">
+                  <a-select-option value="0">全部</a-select-option>
+                  <a-select-option value="1">关闭</a-select-option>
+                  <a-select-option value="2">运行中</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+          </template> -->
+          <a-col :md="(!advanced && 8) || 24" :sm="24">
+            <span
+              class="table-page-search-submitButtons"
+              :style="(advanced && { float: 'right', overflow: 'hidden' }) || {}"
+            >
+              <a-button type="primary" icon="search"  @click="$refs.table.refresh(true)">查询</a-button>
+              <a-button style="margin-left: 8px" icon="redo" @click="() => (queryParam = {})">重置</a-button>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+
+    <div class="table-operator">
+      <a-button type="primary" icon="plus" @click="handleEdit()">新建</a-button>
+      <a-button type="primary" icon="minus" @click="handleEdit()">删除</a-button>
+      <!-- <a-button type="dashed" @click="tableOption">{{ (optionAlertShow && '关闭') || '开启' }} alert</a-button> -->
+      <a-dropdown v-action:edit v-if="selectedRowKeys.length > 0">
+        <a-menu slot="overlay">
+          <a-menu-item key="1"><a-icon type="delete" />删除</a-menu-item>
+          <a-menu-item key="2"><a-icon type="lock" />锁定</a-menu-item>
+        </a-menu>
+        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /> </a-button>
+      </a-dropdown>
+    </div>
+
+    <s-table
+      ref="table"
+      size="default"
+      rowKey="key"
+      :columns="columns"
+      :data="loadData"
+      :alert="options.alert"
+      :rowSelection="options.rowSelection"
+    >
+      <span slot="serial" slot-scope="text, record, index">
+        {{ index + 1 }}
+      </span>
+      <span slot="action" slot-scope="text, record">
+        <template>
+          <a @click="handleEdit(record)">编辑</a>
+          <a-divider type="vertical" />
+        </template>
+        <a-dropdown>
+          <a class="ant-dropdown-link"> 更多 <a-icon type="down" /> </a>
+          <a-menu slot="overlay">
+            <a-menu-item>
+              <a href="javascript:;">详情</a>
+            </a-menu-item>
+            <a-menu-item v-if="$auth('table.disable')">
+              <a href="javascript:;">禁用</a>
+            </a-menu-item>
+            <a-menu-item v-if="$auth('table.delete')">
+              <a href="javascript:;">删除</a>
+            </a-menu-item>
+          </a-menu>
+        </a-dropdown>
+      </span>
+    </s-table>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+import { STable } from '@/components'
+import { getCourseList } from '@/api/course/course'
+
+export default {
+  name: 'TableList',
+  components: {
+    STable,
+  },
+  data() {
+    return {
+      mdl: {},
+      // 高级搜索 展开/关闭
+      advanced: false,
+      // 查询参数
+      queryParam: {},
+      // 表头
+      columns: [
+        {
+          title: '序号',
+          width: 60,
+          scopedSlots: { customRender: 'serial' },
+        },
+        {
+          title: '项目名称',
+          dataIndex: 'projectName',
+          key: 'projectName'
+        },
+        {
+          title: '时间',
+          dataIndex: 'description',
+        },
+        {
+          title: '人数',
+          dataIndex: 'callNo',
+          // sorter: true,
+          needTotal: true,
+          // customRender: (text) => text + ' 次',
+        },
+        {
+          title: '项目类型',
+          dataIndex: 'description',
+        },
+        {
+          title: '项目状态',
+          dataIndex: 'description',
+        },
+        {
+          title: '创建人员',
+          dataIndex: 'projectStatus',
+        },
+        {
+          title: '创建时间',
+          dataIndex: 'updatedAt',
+          sorter: true,
+        },
+        // {
+        //   title: '操作',
+        //   dataIndex: 'action',
+        //   width: '150px',
+        //   scopedSlots: { customRender: 'action' },
+        // },
+        {
+          title: '操作',
+          key: 'operation',
+          width: 100,
+          align: 'center',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        return getCourseList(Object.assign(parameter, this.queryParam))
+          .then(res => {
+            return res
+          })
+      },
+
+      selectedRowKeys: [],
+      selectedRows: [],
+
+      // custom table alert & rowSelection
+      options: {
+        alert: {
+          show: true,
+          clear: () => {
+            this.selectedRowKeys = []
+          },
+        },
+        rowSelection: {
+          selectedRowKeys: this.selectedRowKeys,
+          onChange: this.onSelectChange,
+        },
+      },
+      optionAlertShow: false,
+    }
+  },
+  created() {
+    this.tableOption()
+    getRoleList({ t: new Date() })
+  },
+  methods: {
+    tableOption() {
+      if (!this.optionAlertShow) {
+        this.options = {
+          alert: {
+            show: true,
+            clear: () => {
+              this.selectedRowKeys = []
+            },
+          },
+          rowSelection: {
+            selectedRowKeys: this.selectedRowKeys,
+            onChange: this.onSelectChange,
+          },
+        }
+        this.optionAlertShow = true
+      } else {
+        this.options = {
+          alert: false,
+          rowSelection: null,
+        }
+        this.optionAlertShow = false
+      }
+    },
+
+    handleEdit(record) {
+      this.$emit('onEdit', record)
+    },
+    handleOk() {},
+
+    onSelectChange(selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+    },
+    toggleAdvanced() {
+      this.advanced = !this.advanced
+    },
+
+    resetSearchForm() {
+      this.queryParam = {
+        date: moment(new Date()),
+      }
+    },
+  },
+}
+</script>
+
+<style scoped>
+ 
+</style>