From 290de448a58308bffcf2d51e9db6680fab37c041 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Thu, 29 Aug 2024 15:05:52 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=AE=B9=E5=99=A8?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=AD=97=E6=AE=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/common-styles/index.vue |  8 ++---
 src/components/model-notice/index.vue         | 24 ++++++++++---
 .../model-notice/model-notice-styles.vue      | 34 +++++++++++++++++++
 src/components/page-settings/page-styles.vue  |  2 +-
 src/layout/components/main/default/notice.ts  | 16 +++++++++
 5 files changed, 72 insertions(+), 12 deletions(-)

diff --git a/src/components/common/common-styles/index.vue b/src/components/common/common-styles/index.vue
index f58a6859..e641bd1c 100644
--- a/src/components/common/common-styles/index.vue
+++ b/src/components/common/common-styles/index.vue
@@ -78,14 +78,10 @@ const props = defineProps({
     }
 });
 // 初始化表单数据
-interface color_form {
-    color: string;
-    color_percentage: number | undefined;
-}
 const init_form = reactive({
     direction: '180deg',
     background_img_url: [] as uploadList[],
-    color_list: [{ color: '', color_percentage: undefined }] as color_form[],
+    color_list: [{ color: '', color_percentage: undefined }] as color_list[],
     background_img_style: 2,
     padding: 0,
     padding_top: 0,
@@ -112,7 +108,7 @@ const init_form = reactive({
 let form = reactive(Object.assign({}, init_form, props.value));
 const emit = defineEmits(['update:value']);
 
-const mult_color_picker_event = (arry: color_form[], type: number) => {
+const mult_color_picker_event = (arry: color_list[], type: number) => {
     form.color_list = arry;
     form.direction = type.toString();
     emit('update:value', form);
diff --git a/src/components/model-notice/index.vue b/src/components/model-notice/index.vue
index c98fa1c0..66948bb6 100644
--- a/src/components/model-notice/index.vue
+++ b/src/components/model-notice/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div :style="style_container">
         <template v-if="form.notice_style == 'inherit'">
-            <div class="flex-row align-c news-box gap-y-8">
+            <div class="flex-row align-c news-box gap-y-8" :style="container_background_style">
                 <template v-if="form.title_type == 'img-icon'">
                     <div v-if="!isEmpty(form.img_src)">
                         <image-empty v-model="form.img_src[0]" :style="img_style"></image-empty>
@@ -20,7 +20,7 @@
             </div>
         </template>
         <template v-else>
-            <div class="news-card flex-col gap-10">
+            <div class="news-card flex-col gap-10" :style="container_background_style">
                 <div class="flex-row w jc-sb">
                     <template v-if="form.title_type == 'img-icon'">
                         <template v-if="!isEmpty(form.icon_class)">
@@ -41,7 +41,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { common_styles_computer, get_math, gradient_handle } from '@/utils';
+import { background_computer, common_styles_computer, get_math, gradient_computer, gradient_handle, radius_computer } from '@/utils';
 import { isEmpty, cloneDeep } from 'lodash';
 
 const props = defineProps({
@@ -62,6 +62,19 @@ const { form, new_style } = toRefs(state);
 
 // 用于样式显示
 const style_container = computed(() => common_styles_computer(new_style.value.common_style));
+// 容器高度
+const container_height = computed(() => new_style.value.container_height + 'px');
+// 容器背景
+const container_background_style = computed(() => {
+    const { container_color_list, container_direction, container_background_img_style, container_background_img_url } = new_style.value;
+    const styles = {
+        color_list: container_color_list,
+        direction: container_direction,
+        background_img_url: container_background_img_url,
+        background_img_style: container_background_img_style,
+    };
+    return gradient_computer(styles) + radius_computer(new_style.value.container_radius) + background_computer(styles) + `overflow:hidden;`;
+});
 // 图片设置
 const img_style = ref('');
 // 标题的设置
@@ -128,7 +141,8 @@ watchEffect(() => {
 </script>
 <style lang="scss" scoped>
 .news-box {
-    height: 4.4rem;
+    min-height: 4.4rem;
+    overflow: hidden;
     padding: 0 1rem;
     background: #fff;
 }
@@ -160,7 +174,7 @@ watchEffect(() => {
 }
 :deep(.el-carousel) {
     .el-carousel__container {
-        height: 4.4rem;
+        height: v-bind(container_height);
         .el-carousel__item {
             line-height: 4.4rem;
             overflow: hidden;
diff --git a/src/components/model-notice/model-notice-styles.vue b/src/components/model-notice/model-notice-styles.vue
index bd0abc16..89f02968 100644
--- a/src/components/model-notice/model-notice-styles.vue
+++ b/src/components/model-notice/model-notice-styles.vue
@@ -29,6 +29,35 @@
                         </el-form-item>
                     </template>
                 </template>
+                <template v-if="substance.notice_style === 'inherit'">
+                    <el-form-item label="容器高度">
+                        <slider v-model="form.container_height" :max="1000"></slider>
+                    </el-form-item>
+                </template>
+                <el-form-item label="容器背景">
+                    <div class="flex-col gap-10 w">
+                        <div class="size-12">背景色</div>
+                        <mult-color-picker :value="form.container_color_list" :type="form.container_direction" @update:value="mult_color_picker_event"></mult-color-picker>
+                        <div class="flex-row jc-sb align-c">
+                            <div class="size-12">背景图</div>
+                            <el-radio-group v-model="form.container_background_img_style" is-button>
+                                <el-tooltip content="单张" placement="top" effect="light">
+                                    <el-radio-button value="0"><icon name="single-sheet"></icon></el-radio-button>
+                                </el-tooltip>
+                                <el-tooltip content="平铺" placement="top" effect="light">
+                                    <el-radio-button value="1"><icon name="tile"></icon></el-radio-button>
+                                </el-tooltip>
+                                <el-tooltip content="铺满" placement="top" effect="light">
+                                    <el-radio-button value="2"><icon name="spread-over"></icon></el-radio-button>
+                                </el-tooltip>
+                            </el-radio-group>
+                        </div>
+                        <upload v-model="form.container_background_img_url" :limit="1"></upload>
+                    </div>
+                </el-form-item>
+                <el-form-item label="容器圆角">
+                    <radius :value="form.container_radius"></radius>
+                </el-form-item>
                 <el-form-item label="按钮颜色">
                     <color-picker v-model="form.button_color" default-color="#999"></color-picker>
                 </el-form-item>
@@ -65,6 +94,11 @@ const is_img = computed(() => substance.value.title_type == 'img-icon');
 const common_styles_update = (val: Object) => {
     form.value.common_style = val;
 };
+
+const mult_color_picker_event = (arry: color_list[], type: number) => {
+    form.value.container_color_list = arry;
+    form.value.container_direction = type.toString();
+};
 </script>
 <style lang="scss" scoped>
 .card.mb-8 {
diff --git a/src/components/page-settings/page-styles.vue b/src/components/page-settings/page-styles.vue
index 143415d9..ab4a52d7 100644
--- a/src/components/page-settings/page-styles.vue
+++ b/src/components/page-settings/page-styles.vue
@@ -71,7 +71,7 @@ let form = reactive(props.value);
 const common_styles_update = (val: Object) => {
     form.common_style = val;
 };
-const mult_color_picker_event = (arry: string[], type: number) => {
+const mult_color_picker_event = (arry: color_list[], type: number) => {
     form.background_color_list = arry;
     form.background_direction = type.toString();
 };
diff --git a/src/layout/components/main/default/notice.ts b/src/layout/components/main/default/notice.ts
index 91ddd0ca..89fb1dc4 100644
--- a/src/layout/components/main/default/notice.ts
+++ b/src/layout/components/main/default/notice.ts
@@ -33,6 +33,11 @@ interface defaultSearch {
         topic_height: number;
         icon_size: number;
         icon_color: string;
+        container_color_list: color_list[],
+        container_direction: string,
+        container_background_img_style: string,
+        container_background_img_url: uploadList[],
+        container_radius: radiusStyle,
         common_style: object;
     };
 }
@@ -78,6 +83,17 @@ const defaultSearch: defaultSearch = {
         icon_size: 12,
         icon_color: '#999',
         button_color: '#999',
+        container_color_list: [{ color: '#fff', color_percentage: undefined }],
+        container_direction: '180deg',
+        container_background_img_style: '2',
+        container_background_img_url: [],
+        container_radius: {
+            radius: 0,
+            radius_top_left: 0,
+            radius_top_right: 0,
+            radius_bottom_left: 0,
+            radius_bottom_right: 0,
+        },
         common_style: defaultCommon,
     },
 };

From 3582d48323d16c49394d471dc3e10872a22e9594 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Thu, 29 Aug 2024 15:23:52 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/product-show-config/index.vue |  6 ++----
 .../model-data-magic/model-data-magic-content.vue   |  8 +++++---
 .../model-data-magic/model-data-magic-styles.vue    |  3 ++-
 .../model-img-magic/model-img-magic-content.vue     | 10 ++++++----
 .../model-img-magic/model-img-magic-styles.vue      |  3 ++-
 .../model-notice/model-notice-content.vue           | 13 ++++++++-----
 src/components/model-notice/model-notice-styles.vue |  5 +++--
 .../model-search/model-search-content.vue           |  2 +-
 src/components/model-search/model-search-styles.vue | 11 +++++++----
 .../model-text-title/model-text-title-content.vue   | 10 ++++++----
 .../model-text-title/model-text-title-styles.vue    | 11 +++++++----
 src/components/page-settings/page-styles.vue        |  5 +++--
 12 files changed, 52 insertions(+), 35 deletions(-)

diff --git a/src/components/common/product-show-config/index.vue b/src/components/common/product-show-config/index.vue
index 5dae4deb..859d584d 100644
--- a/src/components/common/product-show-config/index.vue
+++ b/src/components/common/product-show-config/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <card-container class="card-container-br">
+    <card-container>
         <div class="mb-12">显示内容</div>
         <el-form-item label="是否显示">
             <el-checkbox-group v-model="form.is_show">
@@ -10,6 +10,7 @@
             <el-switch v-model="form.is_price_solo"></el-switch>
         </el-form-item>
     </card-container>
+    <div class="bg-f5 divider-line" />
     <card-container>
         <div class="mb-12">购物车设置</div>
         <el-form-item label="是否显示">
@@ -81,9 +82,6 @@ const change_shop_type = () => {
         margin-bottom: 0;
     }
 }
-.card-container-br {
-    border-bottom: 0.8rem solid #f0f2f5;
-}
 .shopping_button {
     height: 2.7rem;
     line-height: 2.7rem;
diff --git a/src/components/model-data-magic/model-data-magic-content.vue b/src/components/model-data-magic/model-data-magic-content.vue
index d9258079..0b0e7e31 100644
--- a/src/components/model-data-magic/model-data-magic-content.vue
+++ b/src/components/model-data-magic/model-data-magic-content.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="auxiliary-line common-content-height">
+    <div class="w h">
         <el-form :model="form" label-width="80">
-            <card-container class="mb-8">
+            <card-container>
                 <div class="mb-12">展示风格</div>
                 <el-form-item label="选择风格">
                     <div class="flex align-c flex-wrap gap-10">
@@ -11,7 +11,8 @@
                     </div>
                 </el-form-item>
             </card-container>
-            <card-container class="mb-8">
+            <div class="bg-f5 divider-line" />
+            <card-container>
                 <div class="mb-12">展示设置</div>
                 <el-form-item label-width="0" class="show-config">
                     <!-- 风格9 -->
@@ -31,6 +32,7 @@
                     </template>
                 </el-form-item>
             </card-container>
+            <div class="bg-f5 divider-line" />
             <el-tabs v-model="tabs_name" class="content-tabs">
                 <el-tab-pane label="内容设置" name="content">
                     <tabs-content :value="form.data_magic_list[selected_active].data_content" :is-show-title="is_show_title"></tabs-content>
diff --git a/src/components/model-data-magic/model-data-magic-styles.vue b/src/components/model-data-magic/model-data-magic-styles.vue
index 8e430ebe..68262898 100644
--- a/src/components/model-data-magic/model-data-magic-styles.vue
+++ b/src/components/model-data-magic/model-data-magic-styles.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="w">
         <el-form :model="form" label-width="70">
-            <card-container class="mb-8">
+            <card-container>
                 <div class="mb-12">数据魔方</div>
                 <el-form-item label="数据间距">
                     <slider v-model="form.image_spacing" :max="100"></slider>
@@ -14,6 +14,7 @@
                 </el-form-item>
             </card-container>
         </el-form>
+        <div class="bg-f5 divider-line" />
         <common-styles :value="form.common_style" @update:value="common_style_update" />
     </div>
 </template>
diff --git a/src/components/model-img-magic/model-img-magic-content.vue b/src/components/model-img-magic/model-img-magic-content.vue
index 1466a2f9..00002a22 100644
--- a/src/components/model-img-magic/model-img-magic-content.vue
+++ b/src/components/model-img-magic/model-img-magic-content.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="auxiliary-line common-content-height">
+    <div class="w h">
         <el-form :model="form" label-width="60">
-            <card-container class="mb-8">
+            <card-container>
                 <div class="mb-12">展示风格</div>
                 <el-form-item label="选择风格">
                     <div class="flex align-c flex-wrap gap-10">
@@ -11,7 +11,8 @@
                     </div>
                 </el-form-item>
             </card-container>
-            <card-container class="mb-8">
+            <div class="bg-f5 divider-line" />
+            <card-container>
                 <div class="mb-12">展示设置</div>
                 <el-form-item label-width="0" class="show-config">
                     <!-- 风格3 -->
@@ -48,7 +49,8 @@
                     </template>
                 </el-form-item>
             </card-container>
-            <card-container class="mb-8">
+            <div class="bg-f5 divider-line" />
+            <card-container>
                 <div class="mb-12">内容设置</div>
                 <template v-if="!isEmpty(form.img_magic_list[selected_active])">
                     <el-form-item label="上传图片">
diff --git a/src/components/model-img-magic/model-img-magic-styles.vue b/src/components/model-img-magic/model-img-magic-styles.vue
index 0973439a..67345ad7 100644
--- a/src/components/model-img-magic/model-img-magic-styles.vue
+++ b/src/components/model-img-magic/model-img-magic-styles.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="w">
         <el-form :model="form" label-width="70">
-            <card-container class="mb-8">
+            <card-container>
                 <div class="mb-12">图片魔方</div>
                 <el-form-item label="图片间距">
                     <slider v-model="form.image_spacing" :max="100"></slider>
@@ -11,6 +11,7 @@
                 </el-form-item>
             </card-container>
         </el-form>
+        <div class="bg-f5 divider-line" />
         <common-styles :value="form.common_style" @update:value="common_style_update" />
     </div>
 </template>
diff --git a/src/components/model-notice/model-notice-content.vue b/src/components/model-notice/model-notice-content.vue
index 45fd7ad9..0db4b1de 100644
--- a/src/components/model-notice/model-notice-content.vue
+++ b/src/components/model-notice/model-notice-content.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="auxiliary-line common-content-height">
+    <div class="w h">
         <el-form :model="form" label-width="70">
-            <card-container class="mb-8">
+            <card-container>
                 <div class="mb-12">展示设置</div>
                 <el-form-item label="选择风格">
                     <el-radio-group v-model="form.notice_style" class="ml-4">
@@ -10,7 +10,8 @@
                     </el-radio-group>
                 </el-form-item>
             </card-container>
-            <card-container class="mb-8">
+            <div class="bg-f5 divider-line" />
+            <card-container>
                 <div class="mb-12">公告风格</div>
                 <el-form-item label="标题类型">
                     <el-radio-group v-model="form.title_type" class="ml-4">
@@ -36,7 +37,8 @@
                     </el-form-item>
                 </template>
             </card-container>
-            <card-container class="mb-8">
+            <div class="bg-f5 divider-line" />
+            <card-container>
                 <div class="mb-12">按钮设置</div>
                 <el-form-item label="右侧按钮">
                     <el-radio-group v-model="form.is_right_button" class="ml-4">
@@ -48,7 +50,8 @@
                     <url-value v-model="form.more_link"></url-value>
                 </el-form-item>
             </card-container>
-            <card-container class="mb-8">
+            <div class="bg-f5 divider-line" />
+            <card-container>
                 <div class="mb-12">内容设置</div>
                 <drag :data="form.notice_list" type="card" :space-col="25" @remove="remove" @on-sort="on_sort">
                     <template #default="scoped">
diff --git a/src/components/model-notice/model-notice-styles.vue b/src/components/model-notice/model-notice-styles.vue
index 89f02968..95f32444 100644
--- a/src/components/model-notice/model-notice-styles.vue
+++ b/src/components/model-notice/model-notice-styles.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="common-style-height">
+    <div class="w h">
         <el-form :model="form" label-width="80">
-            <card-container class="mb-8">
+            <card-container>
                 <div class="mb-12">标题样式</div>
                 <template v-if="!is_img">
                     <el-form-item label="标题文字">
@@ -66,6 +66,7 @@
                 </el-form-item>
             </card-container>
         </el-form>
+        <div class="bg-f5 divider-line" />
         <common-styles :value="form.common_style" @update:value="common_styles_update" />
     </div>
 </template>
diff --git a/src/components/model-search/model-search-content.vue b/src/components/model-search/model-search-content.vue
index 75d81513..947c9888 100644
--- a/src/components/model-search/model-search-content.vue
+++ b/src/components/model-search/model-search-content.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="auxiliary-line common-content-height bg-f">
+    <div class="w h">
         <el-form :model="form" label-width="70">
             <card-container>
                 <div class="mb-12">展示设置</div>
diff --git a/src/components/model-search/model-search-styles.vue b/src/components/model-search/model-search-styles.vue
index 8fbe2fd9..388818a0 100644
--- a/src/components/model-search/model-search-styles.vue
+++ b/src/components/model-search/model-search-styles.vue
@@ -1,13 +1,14 @@
 <template>
-    <div class="common-style-height">
+    <div class="w h">
         <el-form :model="form" label-width="70">
-            <card-container class="mb-8">
+            <card-container>
                 <div class="mb-12">左侧图标</div>
                 <el-form-item label="图标">
                     <color-picker v-model="form.icon_color" default-color="#CCCCCC"></color-picker>
                 </el-form-item>
             </card-container>
-            <card-container class="mb-8">
+            <div class="bg-f5 divider-line" />
+            <card-container>
                 <div class="mb-12">搜索按钮</div>
                 <el-form-item label="搜索按钮">
                     <color-picker v-model="form.button_inner_color" default-color="#fff"></color-picker>
@@ -37,7 +38,8 @@
                     <radius :value="form.search_button_radius" @update:value="button_radius_change"></radius>
                 </el-form-item>
             </card-container>
-            <card-container class="mb-8">
+            <div class="bg-f5 divider-line" />
+            <card-container>
                 <div class="mb-12">框体样式</div>
                 <el-form-item label="提示文字">
                     <color-picker v-model="form.tips_color" default-color="#CCCCCC"></color-picker>
@@ -53,6 +55,7 @@
                 </el-form-item>
             </card-container>
         </el-form>
+        <div class="bg-f5 divider-line" />
         <common-styles :value="form.common_style" @update:value="common_styles_update" />
     </div>
 </template>
diff --git a/src/components/model-text-title/model-text-title-content.vue b/src/components/model-text-title/model-text-title-content.vue
index ba42cbc3..14bd3bdf 100644
--- a/src/components/model-text-title/model-text-title-content.vue
+++ b/src/components/model-text-title/model-text-title-content.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="auxiliary-line common-content-height">
+    <div class="w h">
         <el-form :model="form" label-width="70">
-            <card-container class="mb-8">
+            <card-container>
                 <div class="mb-12">标题设置</div>
                 <el-form-item label="标题名字">
                     <el-input v-model="form.title" placeholder="请输入标题"></el-input>
@@ -10,7 +10,8 @@
                     <url-value v-model="form.title_link"></url-value>
                 </el-form-item>
             </card-container>
-            <card-container class="mb-8">
+            <div class="bg-f5 divider-line" />
+            <card-container>
                 <div class="mb-12">关键字设置</div>
                 <el-form-item label="关键字">
                     <el-radio-group v-model="form.keyword_show" class="ml-4">
@@ -37,7 +38,8 @@
                     <el-button class="mt-20 mb-20 w" @click="add">+添加</el-button>
                 </template>
             </card-container>
-            <card-container class="mb-8">
+            <div class="bg-f5 divider-line" />
+            <card-container>
                 <div class="mb-12">更多设置</div>
                 <el-form-item label="右侧按钮">
                     <el-radio-group v-model="form.right_show" class="ml-4">
diff --git a/src/components/model-text-title/model-text-title-styles.vue b/src/components/model-text-title/model-text-title-styles.vue
index 818c0ecc..12c1f139 100644
--- a/src/components/model-text-title/model-text-title-styles.vue
+++ b/src/components/model-text-title/model-text-title-styles.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="common-style-height">
+    <div class="w h">
         <el-form :model="form" label-width="80">
-            <card-container class="mb-8">
+            <card-container>
                 <div class="mb-12">标题设置</div>
                 <el-form-item label="标题颜色">
                     <color-picker v-model="form.title_color" default-color="#000000"></color-picker>
@@ -17,7 +17,8 @@
                     </el-form-item>
                 </el-form-item>
             </card-container>
-            <card-container class="mb-8">
+            <div class="bg-f5 divider-line" />
+            <card-container>
                 <div class="mb-12">关键字设置</div>
                 <el-form-item label="文字颜色">
                     <color-picker v-model="form.keyword_color" default-color="#000000"></color-picker>
@@ -26,7 +27,8 @@
                     <slider v-model="form.keyword_size" :max="100"></slider>
                 </el-form-item>
             </card-container>
-            <card-container class="mb-8">
+            <div class="bg-f5 divider-line" />
+            <card-container>
                 <div class="mb-12">更多设置</div>
                 <el-form-item label="按钮颜色">
                     <color-picker v-model="form.right_color" default-color="#999"></color-picker>
@@ -36,6 +38,7 @@
                 </el-form-item>
             </card-container>
         </el-form>
+        <div class="bg-f5 divider-line" />
         <common-styles :value="form.common_style" @update:value="common_styles_update" />
     </div>
 </template>
diff --git a/src/components/page-settings/page-styles.vue b/src/components/page-settings/page-styles.vue
index ab4a52d7..d0ef97c6 100644
--- a/src/components/page-settings/page-styles.vue
+++ b/src/components/page-settings/page-styles.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="styles">
+    <div class="w h">
         <el-form :model="form" label-width="70" class="m-h">
-            <card-container class="mb-8">
+            <card-container>
                 <div class="mb-12">头部样式</div>
                 <el-form-item label="顶部背景">
                     <div class="flex-col gap-10">
@@ -52,6 +52,7 @@
                 </el-form-item>
             </card-container>
         </el-form>
+        <div class="bg-f5 divider-line" />
         <common-styles :value="form.common_style" :is-margin="false" :is-shadow="false" :is-radius="false" @update:value="common_styles_update" />
     </div>
 </template>