diff --git a/src/assets/css/iconfont/germany/iconfont.css b/src/assets/css/iconfont/germany/iconfont.css
new file mode 100644
index 0000000..655f1b5
--- /dev/null
+++ b/src/assets/css/iconfont/germany/iconfont.css
@@ -0,0 +1,59 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 4503445 */
+  src: url('iconfont.woff2?t=1712901332022') format('woff2'),
+       url('iconfont.woff?t=1712901332022') format('woff'),
+       url('iconfont.ttf?t=1712901332022') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-renyuanxinxi-copy:before {
+  content: "\e601";
+}
+
+.icon-baojing:before {
+  content: "\e64b";
+}
+
+.icon-zidongtaiyajiao:before {
+  content: "\e61f";
+}
+
+.icon-taiyajiaogaodu:before {
+  content: "\e623";
+}
+
+.icon-jizhenzhenshu:before {
+  content: "\e61a";
+}
+
+.icon-caijian:before {
+  content: "\e66e";
+}
+
+.icon-shebeixinxi:before {
+  content: "\ea02";
+}
+
+.icon-tonganrenyuanxinxi:before {
+  content: "\e61e";
+}
+
+.icon-a-zu496:before {
+  content: "\e600";
+}
+
+.icon-shengchanxiaoshuai:before {
+  content: "\e612";
+}
+
+.icon-zhinengjiaju:before {
+  content: "\e61c";
+}
+
diff --git a/src/assets/css/iconfont/germany/iconfont.ttf b/src/assets/css/iconfont/germany/iconfont.ttf
new file mode 100644
index 0000000..0cb444d
Binary files /dev/null and b/src/assets/css/iconfont/germany/iconfont.ttf differ
diff --git a/src/assets/css/iconfont/germany/iconfont.woff b/src/assets/css/iconfont/germany/iconfont.woff
new file mode 100644
index 0000000..9f9856b
Binary files /dev/null and b/src/assets/css/iconfont/germany/iconfont.woff differ
diff --git a/src/assets/css/iconfont/germany/iconfont.woff2 b/src/assets/css/iconfont/germany/iconfont.woff2
new file mode 100644
index 0000000..a587ac2
Binary files /dev/null and b/src/assets/css/iconfont/germany/iconfont.woff2 differ
diff --git a/src/http/Exhibition/Germany/index.ts b/src/http/Exhibition/Germany/index.ts
new file mode 100644
index 0000000..eab3a25
--- /dev/null
+++ b/src/http/Exhibition/Germany/index.ts
@@ -0,0 +1,6 @@
+import {get,post} from "@/utils/http"
+
+//获取设备在线状态、设备列表
+export function dDeviceList(){
+    return get('/screen/cisma/dDeviceList')
+}
diff --git a/src/main.ts b/src/main.ts
index b23ea91..7b0231a 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -15,7 +15,8 @@ import 'element-plus/theme-chalk/dark/css-vars.css'
 import 'dayjs/locale/zh-cn'
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 // import echarts from '@/utils/echarts.js'
-import echarts from '@/utils/echarts'
+// import echarts from '@/utils/echarts'
+import VueECharts from 'vue-echarts'
 import {createPinia} from 'pinia'
 // import DataV, { setClassNamePrefix } from '@dataview/datav-vue3';
 import dataV from "@iamzzg/data-view/dist/vue3/datav.map.vue.esm";
@@ -23,9 +24,104 @@ import './registerServiceWorker'
 import router from './router'
 import i18n from './locales'
 
+
+
+import * as echarts from 'echarts/core';
+import {
+  BarChart,
+  // 系列类型的定义后缀都为 SeriesOption
+  BarSeriesOption,
+  LineChart,
+  LineSeriesOption,
+  GaugeChart,
+  GaugeSeriesOption,
+  CustomChart,
+  CustomSeriesOption,
+  MapChart,
+  PieChart,
+  PieSeriesOption,
+} from 'echarts/charts';
+// import {LiquidfillChart,
+//   LiquidfillSeriesOption,} from 'echarts-liquidfill'
+import {
+  TitleComponent,
+  // 组件类型的定义后缀都为 ComponentOption
+  TitleComponentOption,
+  TooltipComponent,
+  TooltipComponentOption,
+  GeoComponent,
+  GridComponent,
+  GridComponentOption,
+  VisualMapComponent ,
+  TimelineComponent ,
+  CalendarComponent ,
+  //基准线
+  MarkLineComponent,
+  
+  // 数据集组件
+  DatasetComponent,
+  DatasetComponentOption,
+  // 内置数据转换器组件 (filter, sort)
+  TransformComponent,
+  LegendComponent,
+  ToolboxComponent
+} from 'echarts/components';
+import { LabelLayout, UniversalTransition } from 'echarts/features';
+import { CanvasRenderer } from 'echarts/renderers';
+
+// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
+type ECOption = echarts.ComposeOption<
+  | BarSeriesOption
+  | LineSeriesOption
+  | GaugeSeriesOption
+  | TitleComponentOption
+  | TooltipComponentOption
+  | CustomSeriesOption
+  | GridComponentOption
+  | DatasetComponentOption
+  | PieSeriesOption
+>;
+
+// 注册必须的组件
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  GeoComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent,
+  LegendComponent,
+  MarkLineComponent,
+  VisualMapComponent,
+  TimelineComponent ,
+  CalendarComponent ,
+  BarChart,
+  LineChart,
+  GaugeChart,
+  PieChart,
+  MapChart,
+  CustomChart,
+  // LiquidfillChart,
+  LabelLayout,
+  UniversalTransition,
+  CanvasRenderer,
+  ToolboxComponent
+]);
+
 let app = createApp(App)
 const store = createPinia()
 app.config.globalProperties.$echarts = echarts;//vue3的挂载方式
+
+app.config.globalProperties.$t = i18n.global.t
+app.config.globalProperties.$te = i18n.global.te
+
+app.config.globalProperties.tLang = (parent:string, item:string):string => {
+  if (i18n.global.te(parent + "." + item)) {
+    return i18n.global.t(parent + "." + item)
+  }
+  return item
+}
+app.component('v-chart', VueECharts)
 app.use(store)
 app.use(i18n)
 app.use(router).use(ElementPlus, {locale: zhCn,}).use(dataV).mount('#app')
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 21357f1..424e5b8 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -365,6 +365,11 @@ const routes: Array<RouteRecordRaw> = [
       {
         path: "/GermanyExhibition",
         name: "GermanyExhibition",
+        component: () => import("../views/Exhibition/Germany/index.vue"),
+      },
+      {
+        path: "/GermanyExhibitionChild",
+        name: "GermanyExhibitionChild",
         component: () => import("../views/Exhibition/Germany/child.vue"),
       },
 
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
index 6136c7e..ff919c0 100644
--- a/src/shims-vue.d.ts
+++ b/src/shims-vue.d.ts
@@ -13,6 +13,14 @@ declare module '*.vue' {
   const component: DefineComponent<{}, {}, any>
   export default component
 }
+
+// 对vue进行类型补充说明
+import { ComponentCustomProperties } from 'vue'
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    tLang: any
+  }
+}
 declare module '@dataview/datav-vue3'
 declare module '@jiaminghi/data-view'
 declare module '*.json'{
@@ -29,4 +37,54 @@ declare module './utils/echarts.js' {
 // 	export default Component;
 // }
 
-declare module "vue-i18n"
\ No newline at end of file
+declare module "vue-i18n"
+declare module "vue-echarts"
+
+/*
+ * @FilePath: \daping\src\utils\echarts.d.ts
+ * @Author: 王路平
+ * @文件版本: V1.0.0
+ * @Date: 2023-01-30 11:37:13
+ * @Description: 
+ * 
+ * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
+ */
+import { ComposeOption } from 'echarts/core';
+import {
+    BarSeriesOption,
+    LineSeriesOption,
+    GaugeSeriesOption,
+    CustomSeriesOption,
+    PieSeriesOption,
+    MapSeriesOption
+} from 'echarts/charts';
+//2.引入组件，也就是option选项中的类型
+// import {LiquidfillChart,
+//     LiquidfillSeriesOption,} from 'echarts-liquidfill'
+import {
+    // 组件类型的定义后缀都为 ComponentOption
+    TitleComponentOption,
+    TooltipComponentOption,
+    GridComponentOption,
+    // 数据集组件
+    DatasetComponentOption,
+    MarkLineComponentOption,
+} from 'echarts/components';
+  
+// 3.通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
+type ECOption = ComposeOption<
+    | BarSeriesOption
+    | LineSeriesOption
+    | GaugeSeriesOption
+    | PieSeriesOption
+    | MapSeriesOption
+    | CustomSeriesOption
+    // | LiquidfillSeriesOption
+    | TitleComponentOption
+    | TooltipComponentOption
+    | GridComponentOption
+    | DatasetComponentOption
+    | MarkLineComponentOption
+>;
+// 4.将这个类型暴露出去
+export { ECOption }
\ No newline at end of file
diff --git a/src/utils/echarts.ts b/src/utils/echarts.ts
index 1be336f..e69de29 100644
--- a/src/utils/echarts.ts
+++ b/src/utils/echarts.ts
@@ -1,94 +0,0 @@
-/*
- * @FilePath: \wang-vue-worke:\demo\daping\src\utils\echarts.ts
- * @Author: 王路平
- * @文件版本: V1.0.0
- * @Date: 2023-01-30 10:39:55
- * @Description: 
- * 
- * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
- */
-
-import * as echarts from 'echarts/core';
-import {
-  BarChart,
-  // 系列类型的定义后缀都为 SeriesOption
-  BarSeriesOption,
-  LineChart,
-  LineSeriesOption,
-  GaugeChart,
-  GaugeSeriesOption,
-  CustomChart,
-  CustomSeriesOption,
-  MapChart,
-  PieChart,
-  PieSeriesOption,
-} from 'echarts/charts';
-// import {LiquidfillChart,
-//   LiquidfillSeriesOption,} from 'echarts-liquidfill'
-import {
-  TitleComponent,
-  // 组件类型的定义后缀都为 ComponentOption
-  TitleComponentOption,
-  TooltipComponent,
-  TooltipComponentOption,
-  GeoComponent,
-  GridComponent,
-  GridComponentOption,
-  VisualMapComponent ,
-  TimelineComponent ,
-  CalendarComponent ,
-  //基准线
-  MarkLineComponent,
-  
-  // 数据集组件
-  DatasetComponent,
-  DatasetComponentOption,
-  // 内置数据转换器组件 (filter, sort)
-  TransformComponent,
-  LegendComponent,
-  ToolboxComponent
-} from 'echarts/components';
-import { LabelLayout, UniversalTransition } from 'echarts/features';
-import { CanvasRenderer } from 'echarts/renderers';
-
-// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
-type ECOption = echarts.ComposeOption<
-  | BarSeriesOption
-  | LineSeriesOption
-  | GaugeSeriesOption
-  | TitleComponentOption
-  | TooltipComponentOption
-  | CustomSeriesOption
-  | GridComponentOption
-  | DatasetComponentOption
-  | PieSeriesOption
->;
-
-// 注册必须的组件
-echarts.use([
-  TitleComponent,
-  TooltipComponent,
-  GeoComponent,
-  GridComponent,
-  DatasetComponent,
-  TransformComponent,
-  LegendComponent,
-  MarkLineComponent,
-  VisualMapComponent,
-  TimelineComponent ,
-  CalendarComponent ,
-  BarChart,
-  LineChart,
-  GaugeChart,
-  PieChart,
-  MapChart,
-  CustomChart,
-  // LiquidfillChart,
-  LabelLayout,
-  UniversalTransition,
-  CanvasRenderer,
-  ToolboxComponent
-]);
-
-// 导出
-export default echarts;
\ No newline at end of file
diff --git a/src/views/Exhibition/Germany/child.vue b/src/views/Exhibition/Germany/child.vue
index a690db6..cbdc340 100644
--- a/src/views/Exhibition/Germany/child.vue
+++ b/src/views/Exhibition/Germany/child.vue
@@ -118,7 +118,7 @@ let getImgSrc = computed(() => {
     冲缝一体机: require("./images/cfytj.png"),
     工业缝纫机: require("./images/cfytj.png"),
   };
-  return imgSrc[name];
+  return imgSrc['冲缝一体机'];
 });
 
 // 获取产出进度echarts数据
diff --git a/src/views/Exhibition/Germany/components/BottomCBox.vue b/src/views/Exhibition/Germany/components/BottomCBox.vue
new file mode 100644
index 0000000..5f46ed6
--- /dev/null
+++ b/src/views/Exhibition/Germany/components/BottomCBox.vue
@@ -0,0 +1,86 @@
+<template>
+    <div class="bc-container">
+        <v-chart class="chart-class" :option="bar_option"></v-chart>
+        <div class="bottom-text">稼动率：实际工作时间/设备开机时间
+
+</div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, getCurrentInstance } from 'vue'
+const { proxy } = getCurrentInstance()
+
+let bar_option = ref({
+ legend: {
+        data:[proxy.tLang('messages','稼动率')],
+    },
+  xAxis: {
+    type: 'category',
+    data: ['104019564#', '1171210#', 'RP2401009', ],
+    axisLabel: {
+            color: '#AEEEFA',
+            fontSize: 14 
+      
+        }
+  },
+  yAxis: {
+    type: 'value',
+    name: proxy.tLang('messages','稼动率'),
+    nameTextStyle: {
+            color: '#fff', 
+            fontSize: 16, 
+        },
+         axisLabel: {
+           formatter: '{value} %',
+            fontSize: 14, 
+            color: '#AEEEFA'  
+        },
+           splitLine: {
+            lineStyle: {
+                type: 'dashed' ,
+                color:  '#032E4E'  
+            }
+        }
+  },
+  series: [
+    {
+      data: [120, 200, 150],
+      type: 'bar',
+      showBackground: true,
+      backgroundStyle: {
+        color: 'rgba(180, 180, 180, 0.2)'
+      },
+         label: {
+            show: true, 
+            position: 'top',
+            formatter: '{c}%' ,
+            color: '#fff', 
+            fontSize: 14,
+        },
+        barWidth: '50%'
+    }
+  ]
+})
+</script>
+
+<style lang="scss" scoped>
+.bc-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+
+    .chart-class {
+        width: 100%;
+        height: 85%;
+    }
+
+    .bottom-text {
+        width: 100%;
+        height: 15%;
+    }
+}
+</style>
diff --git a/src/views/Exhibition/Germany/components/BottomLBox.vue b/src/views/Exhibition/Germany/components/BottomLBox.vue
new file mode 100644
index 0000000..039d109
--- /dev/null
+++ b/src/views/Exhibition/Germany/components/BottomLBox.vue
@@ -0,0 +1,62 @@
+<template>
+    <div class="bl-box-container">
+        <div class="box-item pos">{{ tLang('messages', '机架号') }}:
+            <div>104019564#</div>
+        </div>
+        <div class="box-item">{{ tLang('messages', '设备状态') }}:
+            <div class="status green"></div>
+        </div>
+        <div class="box-item">
+            <div style="text-wrap: nowrap;">{{ tLang('messages', '型号') }}:</div>
+            <div> RPSP-NM-I+K-1-1800-Ⅰ-WC2+K-RF-1P220</div>
+        </div>
+        <div class="box-img">
+            <el-image :src="lqImg" fit="contain"></el-image>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, getCurrentInstance } from 'vue'
+const { proxy } = getCurrentInstance()
+let lqImg = require('./../images/lq.png');
+</script>
+
+<style lang="scss" scoped>
+.bl-box-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+
+    .box-item {
+        width: 100%;
+        height: 80px;
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+        padding-left: 10px;
+        box-sizing: border-box;
+
+        div {
+            margin-left: 20px;
+        }
+
+    }
+    .pos {
+        position: absolute;
+        top: 80px;
+        left: 190px;
+    }
+
+    .box-img {
+        width: 100%;
+        flex: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}
+</style>
diff --git a/src/views/Exhibition/Germany/components/BottomRBox.vue b/src/views/Exhibition/Germany/components/BottomRBox.vue
new file mode 100644
index 0000000..ee01b50
--- /dev/null
+++ b/src/views/Exhibition/Germany/components/BottomRBox.vue
@@ -0,0 +1,99 @@
+<template>
+    <div class="br-container">
+        <div class="card" v-for="item in 2">
+            <v-chart class="chart-class" :option="pie_option"></v-chart>
+            <div class="box-list">
+                <div class="box-item">{{ tLang('messages', '实际产量') }}：<div></div>
+                </div>
+                <div class="box-item">{{ tLang('messages', '计划产量') }}：<div></div>
+                </div>
+                <div class="box-item">{{ tLang('messages', '设备名称') }}：<div></div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, getCurrentInstance } from "vue"
+const { proxy } = getCurrentInstance()
+
+let pie_option = ref({
+    tooltip: {
+        trigger: 'item'
+    },
+    legend: {
+        top: '10%',
+        left: 'center',
+        textStyle: {
+            color: "#ffffff",
+            fontSize: 14,
+        },
+    },
+    series: [
+        {
+            name: 'Output',
+            type: 'pie',
+            radius: ['80%', '90%'],
+            center: ['50%', '70%'],
+            startAngle: 210,
+            endAngle: 330,
+            label: {
+                show: true,
+                position: 'center',
+                formatter: `{d}%`,
+                color: "#fff",
+            },
+            data: [
+                { value: 28, name: proxy.tLang('messages','未完成') },
+                { value: 100, name: proxy.tLang('messages','已完成') },
+
+            ]
+        }
+    ]
+})
+
+</script>
+
+<style lang="scss" scoped>
+.br-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+
+    .card {
+        width: 50%;
+        height: 100%;
+        .chart-class {
+            width: 100%;
+            height: 50%;
+        }
+
+        .box-list {
+            width: 100%;
+            height: 50%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+            .box-item {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            padding-left: 10px;
+            box-sizing: border-box;
+
+            div {
+                margin-left: 20px;
+            }
+        }
+        }
+    }
+
+}
+</style>
diff --git a/src/views/Exhibition/Germany/components/TopLBox.vue b/src/views/Exhibition/Germany/components/TopLBox.vue
new file mode 100644
index 0000000..44dcd91
--- /dev/null
+++ b/src/views/Exhibition/Germany/components/TopLBox.vue
@@ -0,0 +1,215 @@
+<template>
+    <div class="border-box">
+        <div class="box-left">
+            <div class="box-item">{{ tLang('messages', '设备状态') }}:<div class="status" :class="[statusObj[props.data?.workingState]]"></div>
+            </div>
+            <div class="box-item">{{ tLang('messages', '花样名称') }}：<div>{{ props.data.fileName }}</div>
+            </div>
+            <div class="box-item">{{ tLang('messages', '花样总针数') }}：<div>{{ props.data.patternCount }}</div>
+            </div>
+            <div class="box-item">{{ tLang('messages', '当前针数') }}：<div>{{ props.data.currentCount }}</div>
+            </div>
+            <div class="box-item">{{ tLang('messages', '断线提醒') }}：<div class="iconfont icon-baojing" :class="[props.warning?'red-color':'green-color']"></div>
+            </div>
+        </div>
+        <div class="box-right">
+            <v-chart class="chart-class" :option="gauge_option"></v-chart>
+            <div class="box-img">
+                <el-image :src="cfytjImg" fit="contain"></el-image>
+            </div>
+        </div>
+        <div class="pos-label">
+            <div class="box-item">{{ tLang('messages', '机架号') }}：<div>{{ props.data.label }}</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { de } from 'element-plus/es/locale';
+import { ref, getCurrentInstance } from 'vue'
+const { proxy } = getCurrentInstance()
+const props = defineProps<{
+    data: any,
+    warning: boolean
+}>()
+
+let statusObj = {
+    0:'red',
+    1:'yello',
+    2:'green',
+    3:'yello'
+}
+let cfytjImg = require('./../images/cfytj.png');
+let gauge_option = ref({
+    series: [
+        {
+            type: 'gauge',
+            radius: '100%',
+            startAngle: 180,
+            endAngle: 0,
+            min: 0,
+            max: 3000,
+            splitNumber: 8,
+            itemStyle: {
+                color: '#58D9F9',
+                shadowColor: 'rgba(0,138,255,0.45)',
+                shadowBlur: 5,
+                shadowOffsetX: 2,
+                shadowOffsetY: 2
+            },
+            progress: {
+                show: true,
+                roundCap: true,
+                width: 8
+            },
+            pointer: {
+                icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
+                length: '60%',
+                width: 5,
+                offsetCenter: [0, '5%']
+            },
+            axisLine: {
+                roundCap: true,
+                lineStyle: {
+                    width: 8
+                }
+            },
+            axisTick: {
+                splitNumber: 2,
+                lineStyle: {
+                    width: 1,
+                    color: '#999'
+                }
+            },
+            splitLine: {
+                length: 1,
+                lineStyle: {
+                    width: 2,
+                    color: '#999'
+                }
+            },
+            axisLabel: {
+                distance: 20,
+                color: '#999',
+                fontSize: 8
+            },
+            title: {
+                show: false
+            },
+            detail: {
+                backgroundColor: '#fff',
+                borderColor: '#999',
+                borderWidth: 2,
+                width: '80%',
+                lineHeight: 24,
+                height: 20,
+                borderRadius: 8,
+                offsetCenter: [0, '35%'],
+                valueAnimation: true,
+                formatter: function (value) {
+                    return '{value|' + value.toFixed(0) + '}{unit|rpm/min}';
+                },
+                rich: {
+                    value: {
+                        fontSize: 14,
+                        fontWeight: 'bolder',
+                        color: '#777'
+                    },
+                    unit: {
+                        fontSize: 12,
+                        color: '#999',
+                        padding: [0, 0, -1, 1]
+                    }
+                }
+            },
+            data: [
+                {
+                    value: 900
+                }
+            ]
+        }
+    ]
+})
+</script>
+
+<style lang="scss" scoped>
+.border-box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    .box-left {
+        width: 40%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        align-items: center;
+
+        .box-item {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            padding-left: 10px;
+            box-sizing: border-box;
+
+            div {
+                margin-left: 20px;
+            }
+        }
+    }
+
+    .box-right {
+        width: 60%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        .chart-class {
+            width: 100%;
+            height: 60%;
+        }
+
+        .box-img {
+            width: 100%;
+            height: 40%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    }
+
+    .pos-label {
+        position: absolute;
+        top: 30px;
+        right: 26px;
+        width: 50%;
+        height: 30px;
+
+        .box-item {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            padding-left: 10px;
+            box-sizing: border-box;
+
+            div {
+                margin-left: 20px;
+            }
+        }
+    }
+}
+.iconfont {
+    font-size: 40px;
+}
+</style>
diff --git a/src/views/Exhibition/Germany/components/TopRBox.vue b/src/views/Exhibition/Germany/components/TopRBox.vue
new file mode 100644
index 0000000..22ef802
--- /dev/null
+++ b/src/views/Exhibition/Germany/components/TopRBox.vue
@@ -0,0 +1,331 @@
+<template>
+    <div class="r-box-container">
+        <div class="pos-label">
+            <div class="box-item">{{ tLang('messages', '机架号') }}：<div></div>
+            </div>
+        </div>
+        <div class="box-item pos1">
+            {{ tLang('messages', '设备状态') }}:
+            <div class="status green"></div>
+        </div>
+        <div class="icon-box-item pos2">
+            <div class="icon-div">
+                <div class="iconfont icon-caijian"></div>
+
+                <div>111</div>
+            </div>
+            <span>{{ tLang('messages', '剪线次数') }}</span>
+        </div>
+        <div class="icon-box-item pos3">
+            <div class="icon-div">
+                <div class="iconfont icon-jizhenzhenshu"></div>
+                <div>111</div>
+            </div>
+            <span>{{ tLang('messages', '针数') }}</span>
+        </div>
+        <div class="icon-box-item pos4">
+            <div class="icon-div">
+                <div class="iconfont icon-zidongtaiyajiao"></div>
+                <div>111</div>
+            </div>
+            <span>{{ tLang('messages', '压脚次数') }}</span>
+        </div>
+        <v-chart class="chart-class" :option="gauge_option"></v-chart>
+        <div class="image-div">
+            <el-image :src="gyfrjImg" fit="contain"></el-image>
+        </div>
+        <div class="fill-box">
+            <v-chart class="chart-class-fill" :option="fill_option"></v-chart>
+            <data value="fill-title">{{ tLang('messages','能耗') }}(kW·h)</data>
+        </div>
+
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, getCurrentInstance } from 'vue'
+import 'echarts-liquidfill'
+const { proxy } = getCurrentInstance()
+
+let gyfrjImg = require('./../images/gyfrj.png');
+let gauge_option = ref({
+    series: [
+        {
+            type: 'gauge',
+            radius: '100%',
+            startAngle: 180,
+            endAngle: 0,
+            min: 0,
+            max: 3000,
+            splitNumber: 8,
+            itemStyle: {
+                color: '#58D9F9',
+                shadowColor: 'rgba(0,138,255,0.45)',
+                shadowBlur: 5,
+                shadowOffsetX: 2,
+                shadowOffsetY: 2
+            },
+            progress: {
+                show: true,
+                roundCap: true,
+                width: 8
+            },
+            pointer: {
+                icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
+                length: '60%',
+                width: 5,
+                offsetCenter: [0, '5%']
+            },
+            axisLine: {
+                roundCap: true,
+                lineStyle: {
+                    width: 8
+                }
+            },
+            axisTick: {
+                splitNumber: 2,
+                lineStyle: {
+                    width: 1,
+                    color: '#999'
+                }
+            },
+            splitLine: {
+                length: 1,
+                lineStyle: {
+                    width: 2,
+                    color: '#999'
+                }
+            },
+            axisLabel: {
+                distance: 20,
+                color: '#999',
+                fontSize: 8
+            },
+            title: {
+                show: false
+            },
+            detail: {
+                backgroundColor: '#fff',
+                borderColor: '#999',
+                borderWidth: 2,
+                width: '80%',
+                lineHeight: 24,
+                height: 20,
+                borderRadius: 8,
+                offsetCenter: [0, '35%'],
+                valueAnimation: true,
+                formatter: function (value) {
+                    return '{value|' + value.toFixed(0) + '}{unit|rpm/min}';
+                },
+                rich: {
+                    value: {
+                        fontSize: 14,
+                        fontWeight: 'bolder',
+                        color: '#777'
+                    },
+                    unit: {
+                        fontSize: 12,
+                        color: '#999',
+                        padding: [0, 0, -1, 1]
+                    }
+                }
+            },
+            data: [
+                {
+                    value: 900
+                }
+            ]
+        }
+    ]
+})
+let fill_option = ref({
+    series: [{
+        type: 'liquidFill',
+        radius: '80%', //水球大小
+        shape: 'rect',
+        center: ['50%', '50%'],
+        waveAnimation: true,
+        color: [
+            {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                    {
+                        offset: 0,
+                        color: '#138FE2',
+                    },
+                    {
+                        offset: 1,
+                        color: '#126ABC',
+                    },
+                ],
+                globalCoord: false,
+            },
+        ],
+        data: [0.7, 0.7], // data个数代表波浪数
+        amplitude: 10, //振幅
+        backgroundStyle: {
+            borderWidth: 2, //边框大小
+            borderColor: 'rgba(17, 94, 176, 0.8)',//边框颜色
+            color: 'rgba(17, 94, 176, 0.4)',
+        },
+        label: {
+            normal: {
+                textStyle: {
+                    fontSize: 24,
+                    fontWeight: 'bold',
+                    color: '#fff',
+                },
+                formatter: function (params) {
+                    
+                    return params.value
+                }
+            },
+
+        },
+        outline: {
+            borderDistance: 0,
+            itemStyle: {
+                borderWidth: 4,
+                borderColor: 'transparent',
+            },
+        },
+    }],
+})
+</script>
+
+<style lang="scss" scoped>
+@import url("@/assets/css/iconfont/germany/iconfont.css");
+
+.r-box-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+
+    .pos-label {
+        position: absolute;
+        top: 30px;
+        right: 26px;
+        width: 50%;
+        height: 30px;
+
+        .box-item {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            padding-left: 10px;
+            box-sizing: border-box;
+
+            div {
+                margin-left: 20px;
+            }
+        }
+    }
+
+    .box-item {
+        position: absolute;
+        width: 50%;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+
+        div {
+            margin-left: 20px;
+        }
+
+        .icon-div {
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-start;
+            align-items: center;
+        }
+    }
+
+    .icon-box-item {
+        position: absolute;
+        width: 50%;
+
+        div {
+            margin-left: 20px;
+        }
+
+        span {
+            text-align: center;
+        }
+
+        .icon-div {
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-start;
+            align-items: center;
+        }
+    }
+
+    .chart-class {
+        position: absolute;
+        right: 12px;
+        top: 60px;
+        width: 364px;
+        height: 250px;
+    }
+
+    .fill-box {
+        position: absolute;
+        right: 0px;
+        bottom: 13px;
+        width: 180px;
+        height: 220px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        .chart-class-fill {
+            width: 180px;
+            height: 220px;
+        }
+        .fill-title {
+
+        }
+    }
+
+
+    .image-div {
+        position: absolute;
+        right: 157px;
+        top: 242px;
+        width: 216px;
+        height: 138px;
+    }
+
+    .pos1 {
+        top: 100px;
+        left: 24px;
+    }
+
+    .pos2 {
+        top: 140px;
+        left: 0;
+    }
+
+    .pos3 {
+        top: 312px;
+        left: -33px;
+    }
+
+    .pos4 {
+        bottom: 14px;
+        left: 163px;
+    }
+
+    .iconfont {
+        font-size: 100px;
+        color: #7BFEB1;
+    }
+}
+</style>
diff --git a/src/views/Exhibition/Germany/images/lq.png b/src/views/Exhibition/Germany/images/lq.png
new file mode 100644
index 0000000..2152b93
Binary files /dev/null and b/src/views/Exhibition/Germany/images/lq.png differ
diff --git a/src/views/Exhibition/Germany/index.vue b/src/views/Exhibition/Germany/index.vue
new file mode 100644
index 0000000..8254e2a
--- /dev/null
+++ b/src/views/Exhibition/Germany/index.vue
@@ -0,0 +1,257 @@
+<template>
+    <div class="container">
+        <div class="header">
+            <div class="title">
+                <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'再登工况物联管理系统'" :titleTip="[]"
+                    :typeFun="['time']" :alarmType="[]"></header2>
+            </div>
+        </div>
+        <div class="content">
+            <div class="top-content">
+                <div class="top-left-content">
+                    <BorderView :title="'冲缝一体机'">
+                        <TopLBox :data="cfytj" :warning="warning"></TopLBox>
+                    </BorderView>
+                </div>
+                <div class="top-center-content">
+                    <!-- <video controls loop autoplay="true" muted ref="videoElement" width="720">
+                                <source :src="videoUrl" type="video/mp4" />
+                            </video> -->
+                </div>
+                <div class="top-right-content">
+                    <BorderView :title="'工业缝纫机'">
+                        <TopRBox :data="gyfrj"></TopRBox>
+                    </BorderView>
+                </div>
+            </div>
+            <div class="bottom-content">
+                <div class="bottom-left-content">
+                    <BorderView :title="'立切180双喷'">
+                        <BottomLBox :data="lq"></BottomLBox>
+                    </BorderView>
+                </div>
+                <div class="bottom-center-content">
+                    <BorderView :title="'设备稼动率'">
+                        <BottomCBox></BottomCBox>
+                    </BorderView>
+
+                </div>
+                <div class="bottom-right-content">
+                    
+                    <BorderView :title="'产出进度'">
+                        <BottomRBox></BottomRBox>
+                    </BorderView>
+                </div>
+            </div>
+        </div>
+
+        <div class="left-tip-type">
+            <div class="left-tip-type-item">
+                <div class="yuan green"></div>
+                <div class="left-tip-type-item-text">工作</div>
+            </div>
+            <div class="left-tip-type-item">
+                <div class="yuan yello"></div>
+                <div class="left-tip-type-item-text">待机</div>
+            </div>
+            <div class="left-tip-type-item">
+                <div class="yuan red"></div>
+                <div class="left-tip-type-item-text">停机</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, reactive, onMounted, onUnmounted, getCurrentInstance,} from "vue";
+import {dDeviceList} from '@/http/Exhibition/Germany'
+import BorderView from "./components/Border.vue";
+import header2 from "./components/header2.vue";
+import TopLBox from "./components/TopLBox.vue";
+import TopRBox from "./components/TopRBox.vue";
+import BottomLBox from "./components/BottomLBox.vue";
+import BottomCBox from "./components/BottomCBox.vue";
+import BottomRBox from "./components/BottomRBox.vue";
+const { proxy } = getCurrentInstance();
+let videoUrl = ref('https://d.tufting222.cn/video/yzy/micor_edos_english.mp4')
+let cfytj = ref({})
+let gyfrj = ref({})
+let lq = ref({})
+let bar = ref({})
+let pie = ref()
+let warning = ref(false)
+
+function init() {
+    dDeviceList().then((res:any) => {
+        if (res.code == 200) {
+            let data:any = res.data
+            
+            data.forEach(item=>{
+                if(item.name == '工业缝纫机') {
+                    gyfrj.value = item
+                } else if(item.name == '冲缝一体机') {
+                    cfytj.value = item
+                } else if(item.name == '立切机180双喷机') {
+                    lq.value = item
+                }
+            })
+        }
+    })
+}
+onMounted(()=>{
+    init()
+})
+</script>
+
+<style scoped lang="scss">
+.container {
+    height: 1080px;
+    width: 1920px;
+    color: #ffffff;
+    background: url("./../../../assets/img/bg.jpg") no-repeat center center / 100% 100%;
+    background-color: #0e0e0e;
+    position: relative;
+
+    .header {
+        height: 100px;
+        width: 1920px;
+    }
+
+    .content {
+        height: 980px;
+        width: 1920px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        padding: 0 5px;
+        box-sizing: border-box;
+        flex-direction: column;
+        font-size: 24px;
+        color: #00ffff;
+
+        .top-content {
+            height: 516px;
+            width: 1920px;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+
+            .top-left-content {
+                width: 600px;
+                height: 100%;
+
+            }
+
+            .top-center-content {
+                flex: 1;
+                height: 100%;
+                margin: 0 10px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+
+            .top-right-content {
+                width: 600px;
+                height: 100%;
+            }
+        }
+
+        .bottom-content {
+            height: 456px;
+            width: 1920px;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+
+            .bottom-left-content {
+                width: 460px;
+                height: 100%;
+            }
+
+            .bottom-center-content {
+                width: 680px;
+                height: 100%;
+            }
+
+            .bottom-right-content {
+                width: 760px;
+                height: 100%;
+            }
+        }
+    }
+}
+
+.left-tip-type {
+    position: absolute;
+    top: 50px;
+    left: 462px;
+    width: 160px;
+    height: 50px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 14px;
+    font-weight: 700;
+
+    .left-tip-type-item {
+        width: 33%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+
+        .yuan {
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+        }
+
+
+    }
+}
+
+:deep(.green) {
+    background-color: #7cffb2;
+}
+:deep(.green-color) {
+    color: #7cffb2;
+}
+
+:deep(.yello) {
+    background-color: #fddd60;
+}
+:deep(.yello-color) {
+    color: #fddd60;
+}
+
+:deep(.red) {
+    background-color: #ff6e76;
+}
+:deep(.red-color) {
+    color: #ff6e76;
+}
+
+:deep(.status) {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    animation: blink 1s infinite;
+    /* 添加动画效果 */
+}
+
+@keyframes blink {
+    0% {
+        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
+    }
+
+    90% {
+        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
+    }
+
+    100% {
+        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
+    }
+}
+</style>
diff --git a/src/views/MicroExhibition/index.vue b/src/views/MicroExhibition/index.vue
index 90fb69d..c9629ad 100644
--- a/src/views/MicroExhibition/index.vue
+++ b/src/views/MicroExhibition/index.vue
@@ -80,7 +80,7 @@ let { t } = useI18n();
 let route = useRoute()
 const store = useMicroExhibitionStore()
 let lang = route.query.lang as string
-let videoUrl = ref('http://d.tufting222.cn/video/yzy/a.mp4')
+let videoUrl = ref('https://d.tufting222.cn/video/yzy/a.mp4')
 const videoElement = ref(null)
 let timer = null
 let  thisLang = getStoredLanguage();
@@ -283,7 +283,7 @@ function errWebsocket(val) {
 
 onMounted(() => {
     if (thisLang&&thisLang != "简体中文") {
-        videoUrl.value = "http://d.tufting222.cn/video/yzy/micor_edos_english.mp4"
+        videoUrl.value = "https://d.tufting222.cn/video/yzy/micor_edos_english.mp4"
     }
 
     getDeviceProduction()
diff --git a/src/views/energyConsumeJixiefenchang/content/chart/water.vue b/src/views/energyConsumeJixiefenchang/content/chart/water.vue
index ee400c6..ce81ea7 100644
--- a/src/views/energyConsumeJixiefenchang/content/chart/water.vue
+++ b/src/views/energyConsumeJixiefenchang/content/chart/water.vue
@@ -9,129 +9,129 @@
 -->
 
 <template>
-    <div class="gasborder">
-  <border6 ref="refborder4">
+  <div class="gasborder">
+    <border6 ref="refborder4">
       <template v-slot>
         <!-- <h1>{{props.title}}</h1> -->
-        <div ref="gas" ></div>
+        <div ref="gas"></div>
       </template>
-  </border6>
+    </border6>
   </div>
 </template>
 
 <script setup lang="ts">
-import {getCurrentInstance, onMounted, reactive, ref} from "vue"
-import {EDataPerson,EDataPersonItem} from '@/type/energyConsume'
+import { getCurrentInstance, onMounted, reactive, ref } from "vue"
+import { EDataPerson, EDataPersonItem } from '@/type/energyConsume'
 import 'echarts-liquidfill'
 import border6 from "@/components/borderBox/border6.vue";
 const { proxy } = getCurrentInstance() as any;
-let props=defineProps<{
-      title:string,
-      }>()
-let gas=ref()
+let props = defineProps<{
+  title: string,
+}>()
+let gas = ref()
 
-let refborder4=ref()
+let refborder4 = ref()
 
 const echartsData = reactive<EDataPerson>({
-    gas:{
-      div:null,
-      data:null,
-      title:'',
-      box:null
+  gas: {
+    div: null,
+    data: null,
+    title: '',
+    box: null
   },
 })
 
-const setData=(value:any)=>{
-  
-  echartsData.gas!.div=gas.value
-  echartsData.gas!.title=props.title
-  echartsData.gas!.data=({
-          title: {
-            // 标题
-            text: echartsData.gas!.title,
-            textStyle:{
-          color:'#fff',
-          fontSize:20
-            },
-            top:'2%'
-          },
-           series: [{
-    type: 'liquidFill',
-    radius: '80%', //水球大小
-    shape:'rect',
-    center: ['50%', '50%'],
-    waveAnimation: true,
-    color: [
-      {
-        type: 'linear',
-        x: 0,
-        y: 0,
-        x2: 0,
-        y2: 1,
-        colorStops: [
-          {
-            offset: 0,
-            color: '#138FE2',
-          },
-          {
-            offset: 1,
-            color: '#126ABC',
-          },
-        ],
-        globalCoord: false,
-      },
-    ],
-    data: [0.7,0.7], // data个数代表波浪数
-    amplitude: 10, //振幅
-    backgroundStyle: {
-      borderWidth: 2, //边框大小
-      borderColor:'rgba(17, 94, 176, 0.8)',//边框颜色
-      color: 'rgba(17, 94, 176, 0.4)',
-    },
-    label: {
-      normal: {
-        textStyle: {
-          fontSize: 24,
-          fontWeight: 'bold',
-          color: '#fff',
-        },
-        formatter:function(params){
-          return value
-        }
-      },
-      
-    },
-    outline: {
-      borderDistance: 0,
-      itemStyle: {
-        borderWidth: 4,
-        borderColor: 'transparent',
-      },
-    },
-            }],
-        })
+const setData = (value: any) => {
 
-change(echartsData.gas)
+  echartsData.gas!.div = gas.value
+  echartsData.gas!.title = props.title
+  echartsData.gas!.data = ({
+    title: {
+      // 标题
+      text: echartsData.gas!.title,
+      textStyle: {
+        color: '#fff',
+        fontSize: 20
+      },
+      top: '2%'
+    },
+    series: [{
+      type: 'liquidFill',
+      radius: '80%', //水球大小
+      shape: 'rect',
+      center: ['50%', '50%'],
+      waveAnimation: true,
+      color: [
+        {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: '#138FE2',
+            },
+            {
+              offset: 1,
+              color: '#126ABC',
+            },
+          ],
+          globalCoord: false,
+        },
+      ],
+      data: [0.7, 0.7], // data个数代表波浪数
+      amplitude: 10, //振幅
+      backgroundStyle: {
+        borderWidth: 2, //边框大小
+        borderColor: 'rgba(17, 94, 176, 0.8)',//边框颜色
+        color: 'rgba(17, 94, 176, 0.4)',
+      },
+      label: {
+        normal: {
+          textStyle: {
+            fontSize: 24,
+            fontWeight: 'bold',
+            color: '#fff',
+          },
+          formatter: function (params) {
+            return value
+          }
+        },
+
+      },
+      outline: {
+        borderDistance: 0,
+        itemStyle: {
+          borderWidth: 4,
+          borderColor: 'transparent',
+        },
+      },
+    }],
+  })
+
+  change(echartsData.gas)
 }
 
-const change = (item:EDataPersonItem) => {
-  let Ebox=proxy.$echarts.init(
-  item.div,
-  "dark"
-);
-Ebox.setOption(item.data);
-item.box = Ebox
+const change = (item: EDataPersonItem) => {
+  let Ebox = proxy.$echarts.init(
+    item.div,
+    "dark"
+  );
+  Ebox.setOption(item.data);
+  item.box = Ebox
 };
 
-function setchartWH(width:any,height:any){
-    // echartsData.water!.div=water.value
-    gas.value.style.height=height-20+'px'
-    gas.value.style.width=width+'px'
-  
+function setchartWH(width: any, height: any) {
+  // echartsData.water!.div=water.value
+  gas.value.style.height = height - 20 + 'px'
+  gas.value.style.width = width + 'px'
+
   refborder4.value.resetWH()
-if(echartsData.gas.box){
-  echartsData.gas.box.resize()
-}
+  if (echartsData.gas.box) {
+    echartsData.gas.box.resize()
+  }
 
 }
 onMounted(() => {
@@ -147,23 +147,25 @@ defineExpose({
 </script>
 
 <style scoped>
-.gasBox{
-    /* border-radius: 50%; */
-    background-color: #8CE78D;
-    color: #fff;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 20px;
-    font-size: 20px;
+.gasBox {
+  /* border-radius: 50%; */
+  background-color: #8CE78D;
+  color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 20px;
+  font-size: 20px;
 }
-.gasborder{
-    position: relative;
+
+.gasborder {
+  position: relative;
 }
-.gasborder h1{
-    position: absolute;
-    top: 20px;
-    left:20px;
-    color: #fff;
+
+.gasborder h1 {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  color: #fff;
 }
 </style>