centaline-data-driven-v3 0.0.45 → 0.0.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "centaline-data-driven-v3",
-  "version": "0.0.45",
+  "version": "0.0.47",
   "private": false,
   "description": "centaline-data-driven-v3",
   "main": "dist/centaline-data-driven-v3.umd.js",

package/src/assets/commonWeb.css

@@ -80,7 +80,7 @@ body {
   line-height: normal;
 }
 
-.ct-form-tip{
+.ct-form-tip {
   background-color: #ffe7cc;
   border-color: #ffe7cc;
   border-radius: 5px;
@@ -114,6 +114,7 @@ body {
   line-height: 26px;
   color: var(--centalineGray);
 }
+
 .sufLabel2 {
   margin-left: 20px;
   font-size: 12px;
@@ -146,7 +147,8 @@ body {
   margin: auto;
   box-shadow: 0 2px 20px 0 rgb(0 0 0 / 10%);
 }
-.unitName{
+
+.unitName {
   font-size: 12px;
   line-height: 26px;
 }
@@ -418,6 +420,7 @@ body {
   cursor: pointer;
   color: #2E58E6;
 }
+
 .ct-tablecurrencyImg {
   width: 24px;
   margin-top: 2px;
@@ -777,6 +780,11 @@ body {
   margin-right: 15px;
 }
 
+.ct-Radio .el-checkbox .el-checkbox__label {
+  display: flex;
+  align-items: center;
+}
+
 #ct-TreeList .el-main {
   padding: 0 0 0 10px;
 }
@@ -799,9 +807,11 @@ body {
 .viewerMenu .el-sub-menu__title .el-sub-menu__icon-arrow {
   display: inline-block;
 }
-.handle{
-  cursor: move; 
-  user-select: none; /* 禁止文本选择 */
+
+.handle {
+  cursor: move;
+  user-select: none;
+  /* 禁止文本选择 */
 }
 
 
@@ -1035,7 +1045,8 @@ body {
   width: 14px;
   height: 14px;
 }
-.ct-Radio .el-radio.el-radio--small .el-radio__label{
+
+.ct-Radio .el-radio.el-radio--small .el-radio__label {
   height: 24px;
   line-height: 24px;
 }
@@ -1053,21 +1064,26 @@ body {
   border-color: #EE6B6B;
   color: #EE6B6B;
 }
-.el-tag--small{
+
+.el-tag--small {
   height: auto;
   line-height: 16px;
   padding: 3px 9px;
 }
-.el-checkbox.el-checkbox--small{
+
+.el-checkbox.el-checkbox--small {
   height: auto;
   padding: 5px 0;
 }
-.ct-photoSelectList .el-checkbox.el-checkbox--small .el-checkbox__inner{
+
+.ct-photoSelectList .el-checkbox.el-checkbox--small .el-checkbox__inner {
   width: 15px;
   height: 15px;
   border: 1px solid #ed745f;
 }
-.ct-photoSelectList .el-checkbox__input.is-checked .el-checkbox__inner{
+
+.ct-photoSelectList .el-checkbox__input.is-checked .el-checkbox__inner {
   background-color: #ed745f;
 }
+
 /*elementPlus样式重置结束*/

package/src/components/app/CheckBoxList.vue

@@ -1,12 +1,20 @@
 <template>
     <ct-field :vmodel="model">
         <template #Control>
-            <van-checkbox-group v-model="model.value" direction="horizontal" @change="change"
-                :disabled="model.locked" :max="parseInt(model.maxValue1 || 999)">
-                <van-checkbox v-for="item in model.selectItems1" :key="item.code" shape="square" :name="item.code"
-                :style="{ width: model.width1 + 'px' }" style="white-space: normal;">
-                   <span v-html="item.name"></span>
-                </van-checkbox>
+            <van-checkbox-group v-model="model.value" direction="horizontal" @change="change" :disabled="model.locked"
+                :max="parseInt(model.maxValue1 || 999)">
+                <template v-for="item in model.selectItems1" :key="item.code">
+                    <van-checkbox shape="square" :name="item.code" :style="{ width: model.width1 + 'px' }"
+                        style="white-space: normal;">
+                        <span v-html="item.name"></span>
+                    </van-checkbox>
+                    <van-popover v-if="item.toolTip">
+                        <div v-html="item.toolTip" style="font-size: 14px;padding: 10px;"></div>
+                        <template #reference>
+                            <van-icon name="info" size="20" style="top: 5px;" />
+                        </template>
+                    </van-popover>
+                </template>
             </van-checkbox-group>
         </template>
     </ct-field>
@@ -14,7 +22,7 @@
 <script lang="ts" setup>
 import { initData, changeHandler } from '../../utils/mixins';
 import CheckBoxList from '../../loader/src/CheckBoxList';
-const emit = defineEmits(['click', 'change','search'])
+const emit = defineEmits(['click', 'change', 'search'])
 const props = defineProps({
     parameterAction: String,
     vmodel: Object,

package/src/components/app/PhotoSelect.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="van-uploader" style="margin:10px 10px 0 10px; ">
         <div class="van-uploader__wrapper">
-            <draggable :list="photoList" v-bind="dragOptions" @change="onEnd" class="card" @dragover.prevent @drop.prevent>
+            <draggable :list="photoList" v-bind="dragOptions" :distance="1" @change="onEnd" class="card" @dragover.prevent @drop.prevent>
                 <template #item="{ element, index }">
                     <div class="van-uploader__preview" style="display:inline-block;" @click="viewerfile(photoList, index)">
                         <div class="van-image van-uploader__preview-image">

package/src/components/app/PhotoSelectList.vue

@@ -205,13 +205,7 @@ function allchoose() {
 function handleClick() {
     if (chooseList.value && chooseList.value.length > 0) {
         emit('handlePhoto', chooseList.value);
-    } else {
-        ElMessage({
-            message: "请选择至少一张图片",
-            type: 'warning',
-            showClose: true,
-        });
-    }
+    } 
 }
 function rolRouterCellClickHandler(routerKey, rowindex, sourceIndex) {
     if (routerKey == 'photoPreview') {

package/src/components/app/SearchList/SearchStats.vue

@@ -21,9 +21,14 @@ const props = defineProps({
         Boolean,
         default: false,
     },
+    apiParam: {
+        type: Object,
+        default: () => { }
+    },
 })
 const model = ref(null)
 const selectStats = ref("")
+const fieldName1 = ref("")
 const tableStatistics = ref()
 function searchStatsComplate() {
     nextTick(function () {
@@ -40,6 +45,17 @@ function searchStatsComplate() {
 }
 function load(data) {
     model.value = data;
+    data.source.content.forEach((item) => {
+        fieldName1.value = item.fieldName1;
+    });
+    if (selectStats.value == '') {
+        var i = data.source.content.findIndex((v) => {
+            return v.code1 == props.apiParam[fieldName1.value];
+        });
+        if (i > -1) {
+            selectStats.value = i
+        }
+    }
     emit("setTableHeight");
 }
 function handleClick(ev) {

package/src/components/app/SearchList/SearchTable.vue

@@ -1,7 +1,8 @@
 <template>
     <div class="ct-searchtableAPP" ref="refSearchTable" v-if="model">
         <SearchStats ref="refTableStats" v-if="model && searchStatsApi" :api="searchStatsApi"
-            @searchStats="clickSearchStats" :searchModel="model.searchModel" @setTableHeight="setTableHeight">
+            @searchStats="clickSearchStats" :searchModel="model.searchModel" @setTableHeight="setTableHeight"
+            :apiParam="apiParam">
         </SearchStats>
         <div class="ct-table-tip ct-table-tip-mini" style="display: block;" ref="refListHeader"
             v-if="model && model.listHeader" v-html="model.listHeader">
@@ -16,7 +17,7 @@
                         <van-radio-group v-model="checkeds" ref="refCheckboxGroup">
                             <div class="ct-list" v-for="(row, rowindex) in model.listData" :key="rowindex">
                                 <van-radio @click="selectRow(row)" icon-size="16px" checked-color="#EE6B6B"
-                                    :name="rowindex" :disabled="row.flagSelect == false ? true : false"> </van-radio>
+                                    :name="rowindex" :disabled="!flagSelect(row)"> </van-radio>
                                 <ct-layout :vmodel="row" :cellLayout="model.cellLayout" :rowindex="rowindex"
                                     :key="itemKey" @rolRouterclick="rolRouterCellClickHandler"
                                     :actionRouter="model.actionRouter"
@@ -30,7 +31,7 @@
                             <div class="ct-list" v-for="(row, rowindex) in model.listData" :key="rowindex">
                                 <van-checkbox v-if="isoperate || flagPopupSearchlist" shape="square"
                                     checked-color="#EE6B6B" icon-size="14px" :name="rowindex" @click="selectRow(row)"
-                                    :disabled="row.flagSelect == false ? true : false"></van-checkbox>
+                                    :disabled="!flagSelect(row)"></van-checkbox>
                                 <ct-layout :vmodel="row" :cellLayout="model.cellLayout" :rowindex="rowindex"
                                     :key="itemKey" @rolRouterclick="rolRouterCellClickHandler"
                                     :actionRouter="model.actionRouter"
@@ -90,6 +91,10 @@ const props = defineProps({
     api: String,
     searchStatsApi: String,
     flagAppMode: Boolean,
+    apiParam: {
+        type: Object,
+        default: () => { }
+    },
     flagFocus: {
         Boolean,
         default: true,
@@ -461,6 +466,12 @@ function confirmClickHandler() {
         emit('submit', rtnData);
     }
 }
+function flagSelect(row) {
+    if (!model.value.rightCheckBoxColumn || common.getDataOfUpperLower(row, model.value.rightCheckBoxColumn) == 1) {
+        return true;
+    }
+    return false;
+}
 defineExpose({
     model,
     searchComplate,

package/src/components/app/SearchList.vue

@@ -10,7 +10,8 @@
             @showTitle="showTitleScreenHandler" @sort="loadsort"></ct-searchscreen>
         <searchTable ref="refTable" :api="searchDataApi" :searchStatsApi="searchStatsApi"
             :flagPopupSearchlist="flagPopupSearchlist" :singleSelectio="singleSelectio" :flagTabbar="flagTabbar"
-            @scrollHandle="scrollHandle" v-on:submit="popupSearchListConfirm" @loaded="tableLoaded"></searchTable>
+            :apiParam="apiParam" @scrollHandle="scrollHandle" v-on:submit="popupSearchListConfirm"
+            @loaded="tableLoaded"></searchTable>
     </div>
 </template>
 <script lang="ts" setup>
@@ -111,17 +112,17 @@ function tableLoaded() {
     var router = refTable.value.model.buttons.find((v) => {
         return v.key === 'sort';
     });
-    if(router&&refScreen.value){
+    if (router && refScreen.value) {
         refScreen.value.getsortfield(router);
     }
     emit('loaded', refTable.value.model);
 }
-function loadsort(ev){
+function loadsort(ev) {
     if (refTable.value.model) {
         refTable.value.model.sortString = ev.code;
         refTable.value.getPage(1);
     }
-   
+
 }
 function showTitleScreenHandler() {
 

package/src/components/app/ViewerFile.vue

@@ -32,8 +32,7 @@
                         </div>
                     </div>
                     <template v-if="file.mediaTypeID == '1'">
-                        <iframe :src="file.mediaUrl" :height="displayAreaHeight - 80 + 'px'"
-                            :width="displayAreaWidth + 'px'" style="border-width: 0px;">
+                        <iframe :src="file.mediaUrl" height="100%" width="100%" style="border-width: 0px;">
                         </iframe>
                     </template>
                     <!--Photo-->
@@ -48,11 +47,16 @@
                     <template v-else-if="file.mediaTypeID == '4'">
                         <div class="viewerContent">
                             <template v-if="file.thumbnailUrl">
-                                <video preload="none" :poster="file.thumbnailUrl" :src="file.mediaUrl"
-                                    controls="controls" controlslist="nodownload" style="width: 100%;">
-                                    您的浏览器不支持 video 标签。
-                                </video>
-
+                                <template v-if="common.isVideoFile(file.mediaUrl)">
+                                    <video preload="none" :poster="file.thumbnailUrl" :src="file.mediaUrl"
+                                        controls="controls" controlslist="nodownload" style="width: 100%;">
+                                        您的浏览器不支持 video 标签。
+                                    </video>
+                                </template>
+                                <template v-else>
+                                    <iframe :src="file.mediaUrl" height="100%" width="100%" style="border-width: 0px;">
+                                    </iframe>
+                                </template>
                             </template>
                             <template v-else>
                                 <video preload="none" :src="file.mediaUrl" controls="controls" class="viewerContent"
@@ -109,7 +113,7 @@
 </template>
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-
+import common from '../../utils/common'
 import viewerImage from './ViewerFile/ViewerImage.vue';
 import viewerPDF from './ViewerFile/ViewerPDF.vue';
 import viewerP360 from './ViewerFile/viewerP360.vue';
@@ -188,10 +192,11 @@ function onswipenext() {
     display: inline-block !important;
     font-size: 14px;
     padding: 10px;
+    background: rgba(0, 0, 0, .45);
 }
 
 .enlarge-picture {
-    display:flex;
+    display: flex;
     padding: 2px 0;
 }
 </style>

package/src/components/app/searchScreen.vue

@@ -6,7 +6,7 @@
                     style=" width: 100%;">
                     <van-dropdown-item v-for="(field, index) in screendata" :key="index" ref="Refitem"
                         :title-class="field.searchValue || field.searchValue1 ? 'title color-EE6B6B' : 'title'"
-                        @open="open(field)" @close="close(field)">
+                        @open="open(field)" @close="close(field)" :disabled="field.locked">
                         <template #title>
                             <span v-if="field.searchValue || field.searchValue1">{{ getLableShow(field) }}</span>
                             <span v-else>{{ field.controlLabel }}</span>
@@ -16,31 +16,31 @@
                         <div style="padding: 5px 16px; display: flex;" v-if="field.is != 'ct-combobox'">
                             <van-button color="#ECECEC" block @click="field.reset()"
                                 style="color:333333;margin-right: 10px;">
-                                重置
+                                {{ getBtnLabel(Enum.ControlType.ButtonReset, '重置') }}
                             </van-button>
                             <van-button color="#FF5252" block @click="clickHandler(field)">
-                                确定
+                                {{ getBtnLabel(Enum.ControlType.ButtonSearch, '确定') }}
                             </van-button>
                         </div>
                     </van-dropdown-item>
                     <van-dropdown-item v-if="ismore" key="4" title="更多" ref="RefitemMore" title-class="title"
                         class="screen-more" @open="openMore" @close="closeMore">
                         <template v-for="(field, index) in model.screen" :key="index">
-                            <component :is="field.is" :vmodel="field" ref="Fields"
+                            <component v-if="field.show !== false" :is="field.is" :vmodel="field" ref="Fields"
                                 :parameterAction="model.parameterAction" />
                         </template>
                         <template v-for="(field, index) in model.highScreen" :key="index">
-                            <component :is="field.is" :vmodel="field" ref="Fields"
+                            <component v-if="field.show !== false" :is="field.is" :vmodel="field" ref="Fields"
                                 :parameterAction="model.parameterAction" />
                         </template>
                         <van-sticky position="bottom">
                             <div style="padding: 5px 16px; display: flex;background-color: #ffffff;">
                                 <van-button color="#ECECEC" block @click="reset"
                                     style="color:333333;margin-right: 10px;">
-                                    重置
+                                    {{ getBtnLabel(Enum.ControlType.ButtonReset, '重置') }}
                                 </van-button>
                                 <van-button color="#FF5252" block @click="clickHandlerMore()">
-                                    确定
+                                    {{ getBtnLabel(Enum.ControlType.ButtonSearch, '确定') }}
                                 </van-button>
                             </div>
                         </van-sticky>
@@ -157,7 +157,9 @@ function failLoad() {
 //无任何筛选条件时，不显示该div
 function setScreenShow() {
     let showField = model.value.screen.find((v) => {
-        return v.show !== false;
+        return v.show !== false &&
+            v.controlType !== Enum.ControlType.LineFeed &&
+            v.controlType !== Enum.ControlType.IndependentGroup;
     });
     if (!showField) {
         showField = model.value.btnScreen.find((v) => {
@@ -172,8 +174,9 @@ function setscreendata() {
     screendata.value = [];
     var screens = model.value.screen.filter((v, i) => {
         return (
-            v.show === true &&
-            v.type != Enum.ControlType.IndependentGroup
+            v.show !== false &&
+            v.controlType !== Enum.ControlType.IndependentGroup &&
+            v.controlType !== Enum.ControlType.LineFeed
         );
     });
     if (screens.length > 4) {
@@ -280,10 +283,14 @@ function closeMore() {
 function setsearchdata() {
     searchdata.value = [];
     var screens = model.value.screen.filter((v) => {
-        return v.show === true && v.controlType != Enum.ControlType.IndependentGroup;
+        return v.show === true &&
+            v.controlType != Enum.ControlType.IndependentGroup &&
+            v.controlType !== Enum.ControlType.LineFeed;
     });
     var highScreen = model.value.highScreen.filter((v) => {
-        return v.show === true && v.controlType != Enum.ControlType.IndependentGroup;
+        return v.show === true &&
+            v.controlType != Enum.ControlType.IndependentGroup &&
+            v.controlType !== Enum.ControlType.LineFeed;
     });
     screens = [...screens, ...highScreen];
     screens.forEach((v) => {
@@ -337,6 +344,16 @@ function selectsort(ev) {
     }
     emit("sort", ev);
 }
+function getBtnLabel(controlType, controlLabel) {
+    let rtn = controlLabel;
+    let field = model.value.btnScreen.find((v) => {
+        return v.controlType === controlType;
+    });
+    if (field) {
+        rtn = field.controlLabel
+    }
+    return rtn;
+}
 function getLableShow(field) {
     let labelShow = field.searchName;
     if (!labelShow) {

package/src/components/web/CheckBoxList.vue

@@ -1,11 +1,19 @@
 <template>
     <ct-field :vmodel="model">
         <template #Control>
-            <div class="ct-Radio fieldControl" :class="[model.value !== ''&&model.value.length>0&&!model.locked ? 'hasValue' : '']" >
-                <el-checkbox-group v-model="model.value" @change="change" :max="parseInt(model.maxValue1 || 999)" style="display: inline-block;">
+            <div class="ct-Radio fieldControl"
+                :class="[model.value !== '' && model.value.length > 0 && !model.locked ? 'hasValue' : '']">
+                <el-checkbox-group v-model="model.value" @change="change" :max="parseInt(model.maxValue1 || 999)"
+                    style="display: inline-block;">
                     <el-checkbox v-bind="model.attrs" v-for="(item, index) in model.selectItems1" :key="index"
-                        :label="item.code" :disabled="model.locked" :style="{ width: model.width1 + 'px' }" style="white-space: normal;">
+                        :label="item.code" :disabled="model.locked" :style="{ width: model.width1 + 'px' }"
+                        style="white-space: normal;">
                         <span v-html="item.name" style="line-height: 16px;"></span>
+                        <el-icon :size="18" v-if="item.toolTip" style="margin-left: 5px;">
+                            <el-tooltip  raw-content :content="item.toolTip" placement="top" effect="light">
+                                <WarningFilled />
+                            </el-tooltip>
+                        </el-icon>
                     </el-checkbox>
                     <el-icon @click="clearClickHandle" class="el-range__close-icon" style="margin-left: 10px;">
                         <CircleClose />
@@ -18,7 +26,7 @@
 <script lang="ts" setup>
 import { initData, changeHandler } from '../../utils/mixins';
 import CheckBoxList from '../../loader/src/CheckBoxList';
-const emit = defineEmits(['click', 'change','search'])
+const emit = defineEmits(['click', 'change', 'search'])
 const props = defineProps({
     parameterAction: String,
     vmodel: Object,
@@ -33,7 +41,7 @@ function change() {
 }
 function clearClickHandle() {
     model.value.reset()
-     change()
+    change()
 }
 defineExpose({
     model

package/src/components/web/File.vue

@@ -7,12 +7,12 @@
         v-model:file-list="model.fileList" :multiple="true" :auto-upload="true" :action="action()"
         :data="model.uploadData" :headers="headers" :before-upload="beforeUploadProcess"
         :on-success="handleAvatarSuccess" :on-error="handleAvatarError" :on-progress="uploadProcess"
-        :limit="parseInt(model.maxValue1 || 999)" :on-exceed="handleExceed">
+        :limit="parseInt(model.maxValue1 || 999)" :on-exceed="handleExceed"
+        :uploadStatus="!model.disableUpload&&!model.locked?'upload':'lock'"
+        >
         <el-icon>
           <Plus />
-        </el-icon>
-        <input style="position: absolute;width: 0px;height: 0px;top: 13px;left: 5px;" type="text" placeholder="粘贴上传"
-          source="upload" @paste="handlePaste" ref="refPasteUpload" />
+        </el-icon> 
         <template #tip>
           <div class="el-upload__tip errorMessage" style="white-space:pre-wrap;" v-show="!model.valid"
             v-html="model.validMessage">
@@ -20,14 +20,9 @@
           <div v-show="model.description" v-html="model.description">
           </div>
         </template>
-        <div class="qrcode-target">
-          <img @click.stop="qrcodeFn" ref="QRCodeRef" v-if="model.QRCodeAction" :src="util.getAssetsImage('serw1.png')"
+        <div class="qrcode-target"  v-if="model.QRCodeAction">
+          <img @click.stop="qrcodeFn" ref="QRCodeRef" :src="util.getAssetsImage('serw1.png')"
             style="width: 35px;height: 35px; float: right; " alt="扫码上传" title="扫码上传" />
-          <div style="cursor: pointer;    height: 16px;line-height: 16px; float: right;" @click.stop="getFocus">
-            <el-icon style="font-size: 14px;" title="粘贴上传">
-              <DocumentCopy />
-            </el-icon>
-          </div>
         </div>
         <div class="ScanUploadPhoto" v-if="model.qrcodeVisible" @click.stop="qrcodeVisible = true"
           :style="{ top: model.QRCodeRefTop + 'px', left: model.QRCodeRefLeft + 'px' }">
@@ -192,14 +187,12 @@ const props = defineProps({
 })
 const refct_upload = ref()
 const refupload = ref()
-const QRCodeRef = ref()
-const refPasteUpload = ref()
+const QRCodeRef = ref() 
 const UploadhttpRequest = ref({})
 const startfile = ref();
 const endfile = ref();
 const model = ref(null);
-
-const flagPasteUpload = ref(false);
+ 
 
 const headers = computed(() => {
   return common.getDataDrivenOpts().handler.getRequestHeaders();
@@ -633,40 +626,32 @@ function viewerfile(file) {
   File.viewerfile(file, model.value)
 }
 
-function getFocus() {
-  refPasteUpload.value.focus();
-}
-
-function handlePaste(event) {
-  flagPasteUpload.value = true;
-  PasteUpload(event);
-}
-
+ 
+ 
 function PasteUpload(event) {
-
-  // 获取粘贴板中的图片
-  const clipboardDatas = (event.clipboardData || event.originalEvent.clipboardData);
-  const items = clipboardDatas.items;
-  for (let index in items) {
-    const item = items[index];
-    if (item.kind === 'file') {
-
-      const file = item.getAsFile();
-      let uid = File.uploadguid();
-
-      file.uid = file.uid || uid;
-      refupload.value.handleStart(file);
-      // 提交上传队列
-      refupload.value.submit();
+  if (!model.value.locked && !model.value.disableUpload) {
+    // 获取粘贴板中的图片
+    const clipboardDatas = (event.clipboardData || event.originalEvent.clipboardData);
+    const items = clipboardDatas.items;
+    for (let index in items) {
+      const item = items[index];
+      if (item.kind === 'file') {
+
+        const file = item.getAsFile();
+        let uid = File.uploadguid();
+
+        file.uid = file.uid || uid;
+        refupload.value.handleStart(file);
+        // 提交上传队列
+        refupload.value.submit();
+      }
     }
   }
-
 }
 
-function ListenerPaste(event) {
-  if (!flagPasteUpload.value) {
+function ListenerPaste(event) { 
     var target = event.target;
-    const uploads = document.querySelectorAll('input[source="upload"]');
+    const uploads =  document.querySelectorAll('[uploadStatus="upload"]');
 
     if (!window.uploads) {
       window.uploads = { count: 0, length: uploads.length };
@@ -689,10 +674,7 @@ function ListenerPaste(event) {
       window.uploads = null;
       PasteUpload(event);
     }
-  }
-  else {
-    flagPasteUpload.value = false;
-  }
+  
 
 }
 
@@ -840,7 +822,7 @@ defineExpose({
   position: absolute;
   top: 3px;
   right: 3px;
-  width: 50px;
+  width: 35px;
   height: 35px;
   color: red;
   text-align: right;