新增 权限;菜单逻辑;货主管理;货种管理

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "jiangyunphotosagent",
+  "name": "jiangyun-cargo-owner",
   "version": "0.0.0",
   "scripts": {
     "dev": "vite --mode dev",

src/apis/config.js

@@ -1,7 +1,7 @@
 import store from "../store/index";
 import axios from "axios";
 
-let baseurl = store.state.baseurl;
+let baseurl = import.meta.env.VITE_BASEURL;
 const uploadUrl = `${baseurl}cos/upload`;
 
 axios.interceptors.response.use(
@@ -12,9 +12,9 @@ axios.interceptors.response.use(
     return Promise.reject(error);
   }
 );
-export const $http = function (method, url, data) {
+export const $http = function (url, data) {
   return axios({
-    method,
+    method: data ? "post" : "get",
     url: baseurl + url,
     data,
     withCredentials: true,

src/apis/fetch.js

@@ -2,49 +2,99 @@ import { $http } from "./config";
 export default {
   // 货主登录
   staffLogin(data) {
-    return $http("post", "user/cargo/login", data);
+    return $http("user/cargo/login", data);
   },
   // 获取航次列表
   getVoyageList(data) {
-    return $http("post", "voyage/list", data);
+    return $http("voyage/list", data);
   },
 
   // 获取航次详情
   getVoyageDetail(data) {
-    return $http("post", "/voyage/detail", data);
+    return $http("/voyage/detail", data);
   },
 
   // 更新航次
   updateVoyage(data) {
-    return $http("post", "/voyage/backstage/update", data);
+    return $http("/voyage/backstage/update", data);
   },
 
   // 完成航次
   finishVoyage(data) {
-    return $http("post", "/voyage/backstage/finish", data);
+    return $http("/voyage/backstage/finish", data);
   },
 
   // 添加航次
   addVoyage(data) {
-    return $http("post", "voyage/backstage/add", data);
+    return $http("voyage/backstage/add", data);
   },
 
   // 获取媒体列表
   getMediaList(data) {
-    return $http("post", "/media/backstage/list", data);
+    return $http("/media/backstage/list", data);
   },
   // 导出excel
   exportExcel(data) {
-    return $http("post", "/voyage/exportExcel", data);
+    return $http("/voyage/exportExcel", data);
   },
 
   // 获取卸货列表
   getDischargeList(data) {
-    return $http("post", "/voyage/getDischargeList", data);
+    return $http("/voyage/getDischargeList", data);
   },
 
   // 获取汽车装货记录
   getTruckLoadRecord(data) {
-    return $http("post", "/voyage/getCarLoadRecordList", data);
+    return $http("/voyage/getCarLoadRecordList", data);
+  },
+
+  // 添加角色
+  addRole(data) {
+    return $http("/role/permission/addRole", data);
+  },
+
+  // 获取权限数据
+  getPermisiionData(data) {
+    return $http("/role/permission/getPermisiionData", data);
+  },
+
+  // 获取角色列表
+  getRoleList(data) {
+    return $http("/role/permission/list", data);
+  },
+
+  // 修改角色信息
+  updateRole(data) {
+    return $http("/role/permission/updateRole", data);
+  },
+
+  // 添加货种
+  addCargo(data) {
+    return $http("/cargo/add", data);
+  },
+
+  // 货种列表
+  getCargoList(data) {
+    return $http("/cargo/list", data);
+  },
+
+  // 获取代理列表
+  getAgencyList(data) {
+    return $http("/user/cargo/proxy/list", data);
+  },
+
+  // 添加代理
+  addAgency(data) {
+    return $http("/user/cargo/add/proxy", data);
+  },
+
+  // 获取货主子账户列表
+  getSubAccountList(data) {
+    return $http("/user/cargo/account/list", data);
+  },
+
+  // 添加货主子账户
+  addSubAccount(data) {
+    return $http("/user/cargo/add/loginAccount", data);
   },
 };

src/auth/hasPermission.js

@@ -0,0 +1,7 @@
+export const hasPermission = (roles, route) => {
+  if (route.meta && route.meta.roles) {
+    return roles.some((role) => route.meta.roles.indexOf(role) >= 0);
+  } else {
+    return true;
+  }
+};

src/auth/menuData.js

@@ -0,0 +1,59 @@
+let menuData = [
+  {
+    icon: "el-icon-s-data",
+    title: "航次",
+    items: [
+      {
+        path: "/voyage/voyageList",
+        name: "航次列表",
+        code: "VOYAGELIST",
+      },
+    ],
+  },
+  {
+    icon: "el-icon-s-data",
+    title: "代理管理",
+    items: [
+      {
+        path: "/agencyManage/agencyCompanyList",
+        name: "代理公司列表",
+        code: "PROXYLIST",
+      },
+    ],
+  },
+  {
+    icon: "el-icon-s-data",
+    title: "货种管理",
+    items: [
+      {
+        path: "/cargoManage/cargoList",
+        name: "货种列表",
+        code: "CARGOLIST",
+      },
+    ],
+  },
+  {
+    icon: "el-icon-s-data",
+    title: "账户管理",
+    items: [
+      {
+        path: "/accountManage/subAccountList",
+        name: "子账户列表",
+        code: "ACCOUNTLIST",
+      },
+    ],
+  },
+  {
+    icon: "el-icon-s-data",
+    title: "权限管理",
+    items: [
+      {
+        path: "/authManage/roleList",
+        name: "角色列表",
+        code: "ROLELIST",
+      },
+    ],
+  },
+];
+
+export default menuData;

src/components/Aside.vue

@@ -7,7 +7,11 @@
     active-text-color="#ffd04b"
     :router="true"
   >
-    <el-sub-menu v-for="(item, index) in menu" :key="item" :index="`${index}`">
+    <el-sub-menu
+      v-for="(item, index) in menuData"
+      :key="item"
+      :index="`${index}`"
+    >
       <template v-slot:title>
         <i :class="item.icon"></i>
         <span>{{ item.title }}</span>
@@ -25,6 +29,7 @@
 </template>
 <script>
 import { ref } from "vue";
+import menuData from "../auth/menuData";
 export default {
   setup() {
     let defaultActive = ref();
@@ -48,6 +53,7 @@ export default {
       changeIndex,
       defaultActive,
       menu,
+      menuData,
     };
   },
 };

src/router/index.js

@@ -23,32 +23,122 @@ const router = createRouter({
       },
       component: Login,
     },
-    {
-      path: "/voyage/voyageAdd",
-      name: "voyageAdd",
-      meta: {
-        title: "添加航次",
-      },
-      component: () => import("../views/voyage/voyageAdd.vue"),
-    },
     {
       path: "/voyage/voyageDetail",
       name: "voyageDetail",
       meta: {
         title: "航次详情",
+        code: "VOYAGEDETAIL",
       },
       component: () => import("../views/voyage/voyageDetail.vue"),
     },
-
     {
       path: "/voyage/voyageList",
       name: "voyageList",
       meta: {
         title: "航次列表",
+        code: "VOYAGELIST",
       },
       component: VoyageList,
     },
   ],
 });
+let data = [
+  {
+    path: "/accountManage/subAccountList",
+    name: "subAccountList",
+    meta: {
+      title: "子账户列表",
+      code: "ACCOUNTLIST",
+    },
+    component: () => import("../views/accountManage/subAccountList.vue"),
+  },
+  {
+    path: "/agencyManage/agencyCompanyList",
+    name: "agencyCompanyList",
+    meta: {
+      title: "代理公司列表",
+      code: "PROXYLIST",
+    },
+    component: () => import("../views/agencyManage/agencyCompanyList.vue"),
+  },
+  {
+    path: "/authManage/roleList",
+    name: "roleList",
+    meta: {
+      title: "角色列表",
+      code: "ROLELIST",
+    },
+    component: () => import("../views/authManage/roleList.vue"),
+  },
+  {
+    path: "/authManage/addRole",
+    name: "addRole",
+    meta: {
+      title: "新增角色",
+      code: "ADDUPDATEROLE",
+    },
+    component: () => import("../views/authManage/addRole.vue"),
+  },
+  {
+    path: "/cargoManage/cargoList",
+    name: "cargoList",
+    meta: {
+      title: "货种列表",
+      code: "CARGOLIST",
+    },
+    component: () => import("../views/cargoManage/cargoList.vue"),
+  },
+];
+data.forEach((item) => {
+  router.addRoute(item);
+});
+export const asyncRouterList = [
+  {
+    path: "/accountManage/subAccountList",
+    name: "subAccountList",
+    meta: {
+      title: "子账户列表",
+      code: "ACCOUNTLIST",
+    },
+    component: () => import("../views/accountManage/subAccountList.vue"),
+  },
+  {
+    path: "/agencyManage/agencyCompanyList",
+    name: "agencyCompanyList",
+    meta: {
+      title: "代理公司列表",
+      code: "PROXYLIST",
+    },
+    component: () => import("../views/agencyManage/agencyCompanyList.vue"),
+  },
+  {
+    path: "/authManage/roleList",
+    name: "roleList",
+    meta: {
+      title: "角色列表",
+      code: "ROLELIST",
+    },
+    component: () => import("../views/authManage/roleList.vue"),
+  },
+  {
+    path: "/authManage/addRole",
+    name: "addRole",
+    meta: {
+      title: "新增角色",
+      code: "ADDUPDATEROLE",
+    },
+    component: () => import("../views/authManage/addRole.vue"),
+  },
+  {
+    path: "/cargoManage/cargoList",
+    name: "cargoList",
+    meta: {
+      title: "货种列表",
+      code: "CARGOLIST",
+    },
+    component: () => import("../views/cargoManage/cargoList.vue"),
+  },
+];
 
 export default router;

src/store/index.js

@@ -1,5 +1,5 @@
 import { createStore } from "vuex";
-
+import api from "../apis/fetch";
 console.log(import.meta.env.VITE_PROJECT_ENV);
 let baseurl = import.meta.env.VITE_BASEURL;
 
@@ -25,6 +25,15 @@ const store = createStore({
       state.currentMenuItem = index;
     },
   },
+  actions: {
+    GetPermissionData({ commit }, loginAccountId) {
+      return new Promise((resolve, reject) => {
+        api.getPermisiionData({ loginAccountId }).then((e) => {
+          console.log(e);
+        });
+      });
+    },
+  },
 });
 
 export default store;

src/views/agencyManage/agencyCompanyList.vue

@@ -0,0 +1,241 @@
+<template>
+  <div class="full-container-p24">
+    <div style="display: flex; justify-content: space-between">
+      <div style="display: flex">
+        <el-input
+          placeholder="请输入名称/联系人/手机号"
+          prefix-icon="el-icon-search"
+          v-model="term"
+          clearable
+          style="height: 32px; width: 330px; line-height: 32px"
+        ></el-input>
+        <div class="seach-btn" @click="getAgencyList">查询</div>
+      </div>
+      <el-button type="primary" @click="visable = true">添加代理</el-button>
+    </div>
+
+    <el-dialog v-model="visable" title="添加代理" width="550px">
+      <template v-slot:default>
+        <div class="df jcc">
+          <el-form
+            :model="ruleForm"
+            :rules="rules"
+            ref="form"
+            label-width="110px"
+            label-position="left"
+          >
+            <el-form-item prop="proxyName" label="代理名称">
+              <el-input
+                style="width: 280px"
+                v-model="ruleForm.proxyName"
+              ></el-input>
+            </el-form-item>
+            <el-form-item prop="contactName" label="联系人">
+              <el-input
+                style="width: 280px"
+                v-model="ruleForm.contactName"
+              ></el-input>
+            </el-form-item>
+            <el-form-item prop="contactPhone" label="联系人手机号">
+              <el-input
+                style="width: 280px"
+                v-model="ruleForm.contactPhone"
+              ></el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+      </template>
+      <template v-slot:footer>
+        <div class="dialog-footer">
+          <el-button @click="resetForm">取 消</el-button>
+          <el-button type="primary" @click="addAgency(ruleForm)">
+            确 定
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <div style="margin-top: 24px">
+      <el-table :data="tableData" stripe style="width: 100%">
+        <el-table-column
+          type="index"
+          label="序号"
+          min-width="80"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="userName"
+          label="代理公司"
+          min-width="100"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="contactName"
+          label="联系人"
+          min-width="100"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="phone"
+          label="手机号"
+          min-width="80"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="createTime"
+          label="入驻时间"
+          min-width="160"
+          align="center"
+        ></el-table-column>
+        <el-table-column label="操作" min-width="120" align="center">
+          <template v-slot="scope">
+            <div class="df aic">
+              <el-switch
+                v-model="scope.row.accountStatus"
+                active-color="#13ce66"
+                inactive-color="#ff4949"
+                active-text="启用"
+                inactive-text="禁用"
+                :active-value="1"
+                :inactive-value="0"
+              />
+
+              <div
+                style="
+                  color: red;
+                  margin-left: 10px;
+                  font-size: 14px;
+                  text-decoration: underline;
+                  cursor: pointer;
+                "
+              >
+                删除
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div style="width: 100%; text-align: right; margin-top: 43px">
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :total="total"
+          @current-change="pageChange"
+        ></el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import api from "../../apis/fetch";
+import { ref, onMounted, reactive } from "vue";
+import { ElNotification, ElMessageBox } from "element-plus";
+
+let tableData = ref([]);
+let currentPage = ref(1);
+let total = ref(0);
+let term = ref("");
+let loginAccountId = ref(0);
+let ruleForm = ref({
+  proxyName: "",
+  contactName: "",
+  contactPhone: "",
+});
+const rules = reactive({
+  proxyName: [
+    {
+      required: true,
+      message: "请填写代理名称",
+      trigger: "blur",
+    },
+  ],
+  contactPhone: [
+    {
+      required: true,
+      message: "请填联系人手机号",
+      trigger: "blur",
+    },
+  ],
+  contactName: [
+    {
+      required: true,
+      message: "请填写联系人名称",
+      trigger: "blur",
+    },
+  ],
+});
+
+async function getAgencyList() {
+  let res = await api.getAgencyList({
+    term: term.value,
+    currentPage: currentPage.value,
+    size: 10,
+    loginAccountId: loginAccountId.value,
+  });
+  if (res.data.status == 0) {
+    tableData.value = res.data.result;
+    total.value = res.data.total;
+  } else {
+    tableData.value = [];
+    total.value = 0;
+  }
+}
+
+function pageChange(e) {
+  currentPage.value = e;
+  getAgencyList();
+}
+let visable = ref(false);
+let form = ref(null);
+async function addAgency() {
+  console.log(ruleForm.value);
+  let res = await api.addAgency({
+    ...ruleForm.value,
+    loginAccountId: loginAccountId.value,
+  });
+  console.log(res);
+  let status = res.data.status == 0;
+  ElNotification({
+    title: status ? "成功" : "失败",
+    duration: 1500,
+    message: res.data.msg,
+    type: status ? "success" : "error",
+  });
+  resetForm();
+  getAgencyList();
+}
+function resetForm() {
+  visable.value = false;
+  form.value.resetFields();
+}
+
+function closeModal() {
+  proxyName.value = "";
+  contactPhone.value = "";
+  contactName.value = "";
+}
+
+onMounted(() => {
+  loginAccountId.value = localStorage.loginAccountId;
+  getAgencyList();
+});
+</script>
+
+<style scoped>
+.seach-btn {
+  display: inline-block;
+  width: 60px;
+  height: 38px;
+  background: #0094fe;
+  border-radius: 2px;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #ffffff;
+  text-align: center;
+  line-height: 38px;
+  margin-left: 10px;
+  cursor: pointer;
+}
+</style>

src/views/cargoManage/cargoList.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="full-container-p24">
+    <div style="display: flex; justify-content: space-between">
+      <div style="display: flex">
+        <el-input
+          placeholder="请输入货种名称"
+          prefix-icon="el-icon-search"
+          v-model="term"
+          clearable
+          style="height: 32px; width: 330px; line-height: 32px"
+        ></el-input>
+        <div class="seach-btn" @click="getCargoList">查询</div>
+      </div>
+      <el-button type="primary" @click="addCargo">添加货种</el-button>
+    </div>
+
+    <div style="margin-top: 24px">
+      <el-table :data="tableData" stripe style="width: 100%">
+        <el-table-column
+          type="index"
+          label="序号"
+          min-width="80"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="cargo"
+          label="货种名称"
+          min-width="120"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="createTime"
+          label="添加时间"
+          min-width="160"
+          align="center"
+        ></el-table-column>
+        <el-table-column label="操作" min-width="80" align="center">
+          <template v-slot="scope">
+            <div class="df aic">
+              <el-switch
+                v-model="scope.row.status"
+                active-color="#13ce66"
+                inactive-color="#ff4949"
+                active-text="启用"
+                inactive-text="禁用"
+                :active-value="1"
+                :inactive-value="0"
+              />
+
+              <div
+                style="
+                  color: red;
+                  margin-left: 10px;
+                  font-size: 14px;
+                  text-decoration: underline;
+                  cursor: pointer;
+                "
+              >
+                删除
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div style="width: 100%; text-align: right; margin-top: 43px">
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :total="total"
+          @current-change="pageChange"
+        ></el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import api from "../../apis/fetch";
+import { ref, onMounted } from "vue";
+import { ElNotification, ElMessageBox } from "element-plus";
+
+let tableData = ref([]);
+let currentPage = ref(1);
+let total = ref(0);
+let term = ref("");
+let loginAccountId = ref(0);
+let cargo = ref("");
+
+async function getCargoList() {
+  let res = await api.getCargoList({
+    term: term.value,
+    currentPage: currentPage.value,
+    size: 10,
+    loginAccountId: loginAccountId.value,
+  });
+  if (res.data.status == 0) {
+    tableData.value = res.data.result;
+    total.value = res.data.total;
+  } else {
+    tableData.value = [];
+    total.value = 0;
+  }
+}
+
+function pageChange(e) {
+  currentPage.value = e;
+  getCargoList();
+}
+function addCargo() {
+  ElMessageBox.prompt("请输入货种名称", "添加货种", {
+    confirmButtonText: "添加",
+    cancelButtonText: "取消",
+    inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
+    inputErrorMessage: "请输入货种名称",
+  })
+    .then(async ({ value }) => {
+      let res = await api.addCargo({
+        loginAccountId: loginAccountId.value,
+        cargo: value,
+      });
+      if (res.data.status == 0) {
+        ElNotification({
+          title: "成功",
+          duration: 1500,
+          message: res.data.msg,
+          type: "success",
+        });
+        getCargoList();
+      } else {
+        ElNotification({
+          title: "失败",
+          duration: 1500,
+          message: res.data.msg,
+          type: "error",
+        });
+      }
+    })
+    .catch(() => {});
+}
+
+function closeModal() {
+  cargo.value = "";
+}
+
+onMounted(() => {
+  loginAccountId.value = localStorage.loginAccountId;
+  getCargoList();
+});
+</script>
+
+<style scoped>
+.seach-btn {
+  display: inline-block;
+  width: 60px;
+  height: 38px;
+  background: #0094fe;
+  border-radius: 2px;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #ffffff;
+  text-align: center;
+  line-height: 38px;
+  margin-left: 10px;
+  cursor: pointer;
+}
+</style>

src/views/index/Login.vue

@@ -104,12 +104,14 @@ export default {
               message: res.data.msg,
               type: "success",
             });
-            let { userId, userName, phone, contactName } = res.data.result;
+            let { userId, userName, phone, contactName, loginAccountId } =
+              res.data.result;
             localStorage.setItem("userId", userId);
             localStorage.setItem("userName", userName);
             localStorage.setItem("phone", phone);
             localStorage.setItem("contactName", contactName);
             localStorage.setItem("userType", 1);
+            localStorage.setItem("loginAccountId", loginAccountId);
             store.commit("changeLogin", true);
             router.replace({ path: "/voyage/voyageList" });
           } else {

src/views/voyage/voyageAdd.vue

@@ -1,117 +0,0 @@
-<template>
-  <div class="line-container-p18">
-    <i class="el-icon-arrow-left"></i>
-    <div class="dib go-back ml8">返回航次列表</div>
-  </div>
-  <div id="map-container" class="map-container"></div>
-
-  <div class="line-container-p24">
-    <el-form
-      :rules="rules"
-      label-position="right"
-      label-width="80px"
-      :model="voyageForm"
-    >
-      <div class="line1 df" style="flex-wrap: wrap">
-        <el-form-item prop="voyageName" label="航次名称">
-          <el-input v-model="voyageForm.voyageName"></el-input>
-        </el-form-item>
-        <el-form-item label="货主">
-          <el-input v-model="voyageForm.cargoOwnerId"></el-input>
-        </el-form-item>
-        <el-form-item label="开始时间">
-          <el-input v-model="voyageForm.startTime"></el-input>
-        </el-form-item>
-        <el-form-item label="结束时间">
-          <el-input v-model="voyageForm.endTime"></el-input>
-        </el-form-item>
-        <el-form-item label="装货港">
-          <el-input v-model="voyageForm.loadPort"></el-input>
-        </el-form-item>
-        <el-form-item label="卸货港">
-          <el-input v-model="voyageForm.dischargPort"></el-input>
-        </el-form-item>
-        <el-form-item label="货种">
-          <el-input v-model="voyageForm.cargo"></el-input>
-        </el-form-item>
-        <el-form-item label="吨位">
-          <el-input v-model="voyageForm.tons"></el-input>
-        </el-form-item>
-      </div>
-    </el-form>
-  </div>
-</template>
-<script>
-import { onMounted, ref, toRefs, reactive } from "vue";
-export default {
-  setup() {
-    let map = ref();
-    const rules = reactive({
-      rules: {
-        voyageName: [{ required: true, message: "", trigger: "blur" }],
-        cargoOwnerId: [{ required: true, message: "", trigger: "blur" }],
-        startTime: [{ required: true, message: "", trigger: "blur" }],
-        endTime: [{ required: true, message: "", trigger: "blur" }],
-        loadPort: [{ required: true, message: "", trigger: "blur" }],
-        dischargPort: [{ required: true, message: "", trigger: "blur" }],
-        cargo: [{ required: true, message: "", trigger: "blur" }],
-        tons: [{ required: true, message: "", trigger: "blur" }],
-      },
-    });
-    let voyageForm = reactive({
-      voyageForm: {
-        voyageName: "",
-        cargoOwnerId: "",
-        startTime: "",
-        endTime: "",
-        loadPort: "",
-        dischargPort: "",
-        cargo: "",
-        tons: "",
-      },
-    });
-
-    function initMap() {
-      var center = new TMap.LatLng(31.228721, 121.524761);
-      //初始化地图
-      map.value = new TMap.Map("map-container", {
-        zoom: 12, //设置地图缩放级别
-        center: center, //设置地图中心点坐标
-      });
-    }
-
-    onMounted(() => {
-      initMap();
-    });
-
-    return {
-      ...toRefs(voyageForm),
-      ...toRefs(rules),
-    };
-  },
-};
-</script>
-<style scoped>
-.go-back {
-  font-size: 16px;
-  font-family: PingFangSC-Medium, PingFang SC;
-  font-weight: 500;
-  color: #333d43;
-  line-height: 100%;
-  cursor: pointer;
-}
-
-.map-container {
-  width: 100%;
-  height: 658px;
-  margin: 20px 0;
-}
-
-:deep() .el-form-item {
-  margin-right: 22px;
-  width: 280px;
-}
-:deep() .el-input__inner {
-  text-align: center;
-}
-</style>